如何在react中每次重新呈现时触发CSS动画而不使用库
CSS：
css prettyprint-override">.roll-out {
@keyframes rollout {
0% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}
animation: rollout 0.4s;
}
function Card({ cardText }) {
return <div className="roll-out">{cardText}<div/>
}
这个“滚动”动画只在初始渲染时播放一次。每次由于CardText更改而重新呈现
时，我都希望播放它。不使用库怎么做？
共有1个答案
添加如下所示的键：
function Card({ cardText }) {
return <div key={cardText} className="roll-out">{cardText}<div/>
}
在您的代码中，当div重新呈现时，react仅更改其内部文本。添加一个键将使react在键改变时认为它是一个不同的div,因此它将卸载它并重新装入。
-
问题内容： 我正在尝试对存储进行多次更改，但是直到所有更改完成后才进行渲染。我想用redux-thunk做到这一点。 这是我的动作创建者： 我像这样派遣我的异步动作创建者： 但是，这导致每次反应后都进行渲染。我是redux-thunk的新手，我从未使用过异步中间件，但我认为它可以在这里为我提供帮助。 问题答案： 有一些方法可以实现目标： 经典方式： 通常：动作描述 发生某事 的 事实 ，但没有指定
-
每次因道具更改而重新渲染时，我都希望在react组件上播放动画： 反应： 所以我做了css： 然而，动画只在初始渲染时播放一次。每次都想玩
-
问题内容： 因此，我有以下规则： 还有一些CSS定义了我的一些动画规则： 我可以在这样的： 但是我以后不能再动摇了。 这只会摇晃盒子一次： 如何在不使用超时或多个动画的情况下通过JavaScript重新触发CSS动画？ 问题答案： 我在CSS3转换测试github页面上根据源代码和示例找到了答案。 基本上，CSS动画具有一个在动画完成时触发的事件。 对于Webkit浏览器，此事件称为“”。因此，为
-
问题内容： 我不知道如何使用JQuery，因此我需要一种仅可以使用JavaScript触发动画的方法。 当用户滚动页面时，我需要调用/触发CSS动画。 问题答案： 触发CSS动画的最简单方法是 添加或删除类 -如何使用纯Javascript执行此操作，您可以在此处阅读： 如果您确实使用jQuery（在基本用法上应该很容易学习），则只需使用/即可。 然后，您要做的就是设置到给定元素的过渡，如下所示：
-
我在一个表单上有一个TextField输入，问题是当我在它上键入时，刚刚键入的值的显示/呈现有一种延迟，我想防止这种延迟。 代码：