CSS 淡入淡出过渡(无 jQuery)

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

纯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>