我知道有一种方法可以实现在给定超时后呈现的组件的效果,但我想通过转换在纯CSS中实现它。问题在于,在查看使用css过渡的教程时 - 你通常必须将鼠标悬停在元素上以触发动画 - 但在我的情况下 - 我只是希望元素在渲染后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动画。
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;