通过纯CSS在超时后渲染组件

Question

我知道有一种方法可以实现在给定超时后呈现的组件的效果，但我想通过转换在纯CSS中完成它。问题在于，在查看使用css过渡的教程时 - 你通常必须将鼠标悬停在元素上以触发动画 - 但在我的情况下 - 我只是希望元素在渲染后2秒后变得可见。我怎样才能做到这一点？

Answer 1

动画可以帮助：

p {
  opacity:0;
  animation:show 5s 2s forwards;
}
@keyframes show {
  to {opacity:1}
}

<p>see me</p>

见https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

animation-fill-mode CSS属性指定CSS动画在执行之前和之后应如何将样式应用于其目标。

Answer 2

一个简单的组件就在这个CodePen中。您可以简单地在不透明度上应用css动画。

var SomeComponent = React.createClass({

  render: function() {
    return (
      <div className="myClass">My Component</div>
    );
  }
});
 
React.render(
  <SomeComponent />, 
  document.getElementById('root'));

.myClass {
  opacity:0;
  animation:show 2s 1s forwards;
}

@keyframes show {
  to {
    opacity:1
  }
}

<div id="root"></div>