通过纯CSS

时间:2018-01-03 06:43:38

标签: javascript css reactjs

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

2 个答案:

答案 0 :(得分:3)

动画可以提供帮助:

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动画在执行之前和之后应如何将样式应用于目标。

答案 1 :(得分:0)

这个CodePen中有一个简单的组件。您只需在不透明度上应用css动画。

&#13;
&#13;
var SomeComponent = React.createClass({

  render: function() {
    return (
      <div className="myClass">My Component</div>
    );
  }
});
 
React.render(
  <SomeComponent />, 
  document.getElementById('root'));
&#13;
.myClass {
  opacity:0;
  animation:show 2s 1s forwards;
}

@keyframes show {
  to {
    opacity:1
  }
}
&#13;
<div id="root"></div>
&#13;
&#13;
&#13;