Question

我正在尝试在我正在编写的玩具SPA中创建内容更改之间的可视过渡。为此，我定义了一个简单的类来对元素的不透明度进行动画处理。

.fade {
  transition: opacity 1.5s;
}

在渲染功能中，我现在在内容更改后更改outlet div的不透明度：

function render(content) {
  var outlet = document.getElementById("outlet");  

  outlet.classList.remove("fade");
  outlet.style.opacity = 0;

  outlet.innerHTML = content;
  outlet.classList.add("fade");
  outlet.style.opacity = 1;
}

不幸的是，动画永远不会触发。当我通过setTimeout将不透明度更改为1延迟10毫秒时，例如，如果我在动画仍在运行时不再次更改内容，有时有时会起作用，这说明计时问题/比赛条件。

过去我使用类似的方法淡出消息，但是我故意将不透明度更改延迟了几秒钟，以便用户可以在消息开始淡出之前阅读消息。

Answer 1

尝试一下，希望这可以解决问题

.fade{
       animation-name: example;
       animation-duration: 4s;}
       @keyframes example {
       from {opacity:1}
       to {opacity:0;}
       }
  div{
  width:200px;
  height:200px;
  background:#000;
  }

<html>
<head>
</head>
<body>
<div class="fade"></div>
</body>
</html>

Answer 2

纯CSS动画fadeIn

li {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
}

.logo {
  width: 300px;
  height: 150px;
  background: red;
  margin-left: -150px;
  z-index: 30;
  -webkit-animation: fade-in-slogan 4s .2s ease-in forwards;
     -moz-animation: fade-in-slogan 4s .2s ease-in forwards;
          animation: fade-in-slogan 4s .2s ease-in forwards;
}

.menu {
  width: 600px;
  height: 150px;
  background: blue;  
  margin-left: -300px;
  opacity: 0;
  -webkit-animation: fade-in-menu 3s 4s ease-out forwards;
     -moz-animation: fade-in-menu 3s 4s ease-out forwards;
          animation: fade-in-menu 3s 4s ease-out forwards;
}


@-webkit-keyframes fade-in-slogan {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  50%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; } 
}

@-webkit-keyframes fade-in-menu {
  0%   { display: block; opacity: 0;  }
  30% { display: block; opacity: .3; }
  60% { display: block; opacity: .6; }
  80% { display: block; opacity: .8; }
  100% { display: block; opacity: 1; } 
}

<ul class"main">
  <li class="logo"></li>
  <li class="menu"></li>
</ul>

Answer 3

我已经受Muhammad's answer的启发解决了它。我将fade类定义如下：

.fade {
  animation-name: fadein;
  animation-duration: 1.25s;
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

然后在render函数中，

function render(content) {
  outlet.classList.remove("fade");
  outlet.innerHTML = "";
  setTimeout(() => {
    outlet.classList.add("fade");
    outlet.appendChild(content);
  }, 100);
}

即使这会在新内容开始淡出之前增加额外的延迟，但对我来说，这似乎是最优雅，最简洁的解决方案。

CSS淡入淡出过渡（无jQuery）

3 个答案: