如何添加类以在开始时触发转换

Question

我刚被告知：

--我不会在一开始就添加类来触发转换

这在代码中是怎么修正的？

如何让滴答器在页面加载时淡入，并在单击按钮时淡出？

代码https://jsfiddle.net/3r2gv460/

单击按钮时，不会使淡出。

在中的闪变褪色

.video-one {
  display: flex;
  align-items: flex-end;
}

.alert {
  transition: opacity 4s ease 0s;
  opacity: 0;
}

.video-one.slide .alert {
  opacity: 1;
  transition-delay: 10.5s;
}

.slide .video-one .alert {
  opacity: 0;
  transition: opacity 4s ease 0s;
}

滑动门动画

.video-one {
  top: 0;
  transform: translateY(calc(-100% - 1px));
  animation: curtainDown 10s ease-in 1s forwards;
}

@keyframes curtainDown {
  to {
    transform: translateY(0%);
  }
}

.curtain.slide .video-one {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in 3s forwards;
}

@keyframes curtainUp {
  to {
    transform: translateY(calc(-100% - 1px));
  }
}

什么似乎是问题，这将如何解决或调整？

我应该看到的是：

​

​

​

const manageCover = (function makeManageCover() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    cover.addEventListener("afterClick", callback);
  }

  return {
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  let playlist;
  let player;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    addPlayer(frameContainer, playlist);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
  }

  function createPlaylist(videoIds) {
    return videoIds.join();
  }

  function createOptions(videoIds) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      rel: 0
    };
    options.events = {
      "onReady": onPlayerReady
    };

    options.playerVars.loop = 1;
    options.playerVars.playlist = createPlaylist(videoIds);
    return options;
  }

  function createVideoOptions(ids) {
    const options = createOptions(ids);
    return options;
  }

  function addPlayer(video, ids) {
    const options = createVideoOptions(ids);
    player = new YT.Player(video, options);
    return player;
  }

  function play() {
    if (player && player.playVideo) {
      player.playVideo();
    }
  }

  function init(videoIds) {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    playlist = videoIds;
    return play;
  }

  return {
    init,
    play
  };
}());

manageCover.init(videoPlayer.init([
  "0dgNc5S8cLI",

]));

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
  ;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #f91f6e;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

:root {
  --wide: 32px;
  --angle1: 0;
  --angle2: -90;
}

.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
  background-color: #222;
  border-bottom: 2px solid red;
  background-repeat: no-repeat;
  z-index: 0;
}

.video-one::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("https://via.placeholder.com/264x264");
  background-position: center;
  /*background-size: 41.25% 73.33%;*/
  background-size: 41.25% 79.52%;
  background-repeat: no-repeat;
  z-index: -1;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  z-index: 1;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  border-color: blue;
  animation: fadeInPlay 2s ease-in 2s forwards;
  animation-delay: 10s;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

@keyframes fadeInPlay {
  0% {
    opacity: 0;

  }

  99.9% {
    opacity: 1;
    pointer-events: none;
  }

  100% {
    opacity: 1;
    cursor: pointer;
    pointer-events: initial;
  }
}



.play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  border-left-color: blue;
}



.play:hover {
  box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}

.play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

.slide .exit {
  animation: fadeInExit 4s forwards 7.5s;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

.exit::before {
  transform: rotate(45deg);
}

.exit::after {
  transform: rotate(-45deg);
}

.hide {
  display: none;
}

.video-one {
  top: -101%;
  /* for testing: fast */
  transition: all 10s ease-in 0s;
  transition-delay: 1s;
}

.video-one.slide {
  top: 0%;
}

.curtain.slide .video-one {
  transition-delay: 3s;
  transform: translateY(calc(-100% - 1px));
}

.alert {
  padding: 0px;
}

.bg-yellow {
  background: #ffc000;
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;

}

.alert .message {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-left: 0px;
  color: #000;
  font-size: 16px;
  letter-spacing: -.2px;
  line-height: 22px;
  text-transform: uppercase;
}

.alert {
  display: flex;
  position: relative;
  text-decoration: none;
}


.pill {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  background: #000;
  color: #fff;
}

.animate ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animate ul li {
  height: 20px;
  white-space: nowrap;
}

.text {
  margin: 0 auto;
}

.alert .animate ul {
  display: flex;
  animation: 90s linear 0s infinite normal none running banner-scroll;
}

@keyframes banner-scroll {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-3738.5px);
  }
}

.video-one {
  display: flex;
  align-items: flex-end;
}

.alert {
  transition: opacity 4s ease 0s;
  opacity: 0;
}

.video-one.slide .alert {
  opacity: 1;
  transition-delay: 10.5s;
}

.slide .video-one .alert {
  opacity: 0;
  transition: opacity 4s ease 0s;
}

.video-one {
  top: 0;
  transform: translateY(calc(-100% - 1px));
  animation: curtainDown 10s ease-in 1s forwards;
}

@keyframes curtainDown {
  to {
    transform: translateY(0%);
  }
}

.curtain.slide .video-one {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in 3s forwards;
}

@keyframes curtainUp {
  to {
    transform: translateY(calc(-100% - 1px));
  }
}

<div class="container">
   <div class="curtain">
      <div class="ratio-keeper">
         <div class="video-one">
            <div class="alert bg-yellow">
               <div class="message animate">
                  <ul>
                     <li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing&nbsp;&nbsp;—&nbsp;&nbsp;</li>
                     <li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
                     <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <button class="play" type="button" aria-label="Open"></button>
</div>

​

Answer 1

这起作用了：https://jsfiddle.net/pezf60b5/

.alert {
  animation: alerton 10s ease forwards;
  opacity: 0;
}

/*
.video-one.slide .alert {
  opacity: 1;
  transition: opacity 4s ease 10.5s
}
*/
.slide .video-one .alert {
  animation: alertoff 4s ease;
}

@keyframes alerton {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes alertoff {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}