不能反向使用相同的动画进行类切换 [英] Can't use the same animation in reverse for class toggle
问题描述
我有一个CSS3动画，我想同时以正常和反向顺序使用。我想通过切换两个类来触发动画。基本上是使元素增长的动画，我也想用它来缩小元素。
基本上是：
- 添加扩展类：执行动画
- 删除扩展类，添加折叠后的类：反向执行动画
第一部分可以正常工作，但是，如果我尝试对两个类使用相同的动画，动画将停止工作，不会发生任何事情。
div {
最大高度：1em;
宽度：50像素；
background-color：红色；
颜色：白色；
text-align：center;
border-radius：30px;
padding：1em 0;
}
.expanded {
animation：expand 2s;
background-color：蓝色；
}
.collapsed {
background-color：red;
//动画：反向扩展2s； //取消注释，所有动画均停止工作
}
@keyframes expand {
0％{
max-height：1em;
}
50％{
最大高度：1em;
}
100％{
max-height：200px;
}
}
下面是一个简单的jsfiddle，它演示了这一点：
https://jsfiddle.net/danielo515/jxLcoocs/6/
编辑：
正如@LGSon所建议的，对于本例，使用过渡属性会更简单，但我需要使用动画是因为我正在运行多个动画，所以我需要能够延迟其中的某些部分。
您采用的方法使用不起作用，因为元素已经通过 expanded 类应用了 expand 动画，因此只需简单地调用它再次，添加类 collapsed ，其中唯一的区别是 reverse ，将不起作用，因为它们都引用相同的动画。
W3指出：为了重新启动动画，必须先将其删除然后重新应用。（ https://www.w3.org/TR/css3-animations/#animations ）
最简单的方法是使用2种不同的动画，如以下示例所示。
在该示例中，我还添加了动画填充模式 前进，因此它将保留执行期间遇到的最后一个关键帧设置的计算值。
此处未显示的其他方式可能是：
-
删除并请重新应用动画，但要注意，为使外观看起来不错，元素可能需要首先应用其结束状态，否则可能会在删除时跳回
-
使用
animation-play-state和脚本，以半途中止动画，而后半部分则相反。 -
使用
animation-timing-function添加步骤动画
const example = document.getElementById（'example'）; let Expanded = false; example.className ='expanded'; const toogleClass =（）=> {example.className =展开？ ‘展开’：‘折叠’； expand =！expanded;} setInterval（toogleClass，2500）;
div {max-height：1em;宽度：50像素；背景颜色：红色；白颜色;文本对齐：居中； border-radius：30px; padding：1em 0;}。expanded {动画：向前扩展2s； .collapsed {background-color：red;动画：合拢2秒；} @关键帧展开{0％{最大高度：1em; } 50％{max-height：1em; } 100％{max-height：200px; }} @ keyframes折叠{0％{最大高度：200像素； } 50％{max-height：200px; } 100％{max-height：1em; }}
< div id = example>您好< br> < br> < br> < br>朋友< / div>
另一种方法是使用 transition ，这将为您提供更简单的代码
const example = document.getElementById（'example'）; let Expanded = false; setTimeout（function（）{example.className = 'expanded';}，500）; const toogleClass =（）=> {example.className =展开？ ‘展开’：‘折叠’； expand =！expanded;} setInterval（toogleClass，2500）;
div {max-height：1em;宽度：50像素；背景颜色：红色；白颜色;文本对齐：居中； border-radius：30px;填充：1em 0;过渡：max-height 2s;}。展开了{background-color：blue; max-height：200px;}
< div id = 示例>您好< br> < br> < br> < br>朋友< / div>
I have a CSS3 animation that I want to use both in normal and reverse order. I want to trigger the animation by toggling two classes. Basically is an animation that makes an element grow, and I want to use it to shrink the element too.
Basically it is:
- add expanded class: execute animation
- Remove expanded class, add collapsed class: execute animation in reverse
The first part works correctly, however if I try to use the same animation for both classes the animation stops working, nothing happens.
div {
max-height: 1em;
width: 50px;
background-color: red;
color: white;
text-align: center;
border-radius: 30px;
padding: 1em 0;
}
.expanded {
animation: expand 2s;
background-color: blue;
}
.collapsed {
background-color: red;
//animation: expand 2s reverse; // Uncomment and all animations stop working
}
@keyframes expand {
0% {
max-height: 1em;
}
50% {
max-height: 1em;
}
100% {
max-height: 200px;
}
}
Here is a simple jsfiddle that demonstrates this: https://jsfiddle.net/danielo515/jxLcoocs/6/
EDIT:
As @LGSon have suggested using a transition property will be simpler for this case example, but I need to use an animation because I am running several animations and I need to be able to delay some parts of them.
The approach you use does not work as the element already has the animation expand applied, through the class expanded, so by simply call it again, by adding the class collapsed, where the only difference is the reverse, will not work, as they both reference the same animation.
W3 states: In order to restart an animation, it must be removed then reapplied. (https://www.w3.org/TR/css3-animations/#animations)
So the simplest way to make this work is to use 2 different animations, as shown in below sample.
To that sample I also added the animation fill mode forwards, so it will retain the computed values set by the last keyframe encountered during execution.
Other ways, not shown here, could be:
Remove and reapply the animation, note though, for this to look good the element might need to have its end state applied initially, or else it could jump back on removal
Use
animation-play-stateand a script, to pause an animation half way, where the second half does the reverseUse
animation-timing-functionto add steps to the animation
const example = document.getElementById('example');
let expanded = false;
example.className = 'expanded';
const toogleClass = () => {
example.className = expanded ? 'expanded' : 'collapsed';
expanded = !expanded;
}
setInterval(toogleClass, 2500);
div {
max-height: 1em;
width: 50px;
background-color: red;
color: white;
text-align: center;
border-radius: 30px;
padding: 1em 0;
}
.expanded {
animation: expand 2s forwards;
background-color: blue;
}
.collapsed {
background-color: red;
animation: collaps 2s;
}
@keyframes expand {
0% {
max-height: 1em;
}
50% {
max-height: 1em;
}
100% {
max-height: 200px;
}
}
@keyframes collaps {
0% {
max-height: 200px;
}
50% {
max-height: 200px;
}
100% {
max-height: 1em;
}
}
<div id="example">
Hello
<br>
<br>
<br>
<br> Friends
</div>
Another approach would be to use transition instead, which will give you a much simpler code
const example = document.getElementById('example');
let expanded = false;
setTimeout(function() {example.className = 'expanded';}, 500);
const toogleClass = () => {
example.className = expanded ? 'expanded' : 'collapsed';
expanded = !expanded;
}
setInterval(toogleClass, 2500);
div {
max-height: 1em;
width: 50px;
background-color: red;
color: white;
text-align: center;
border-radius: 30px;
padding: 1em 0;
transition: max-height 2s;
}
.expanded {
background-color: blue;
max-height: 200px;
}
<div id="example">
Hello
<br>
<br>
<br>
<br> Friends
</div>
这篇关于不能反向使用相同的动画进行类切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
