附加到CSS属性
附加到CSS属性
提问于 2018-12-11 08:05:56
可以为CSS动画属性提供一个包含多个动画的列表。我想在CSS文件中创建一个逻辑子类，将一个动画添加到逻辑超类的动画列表中。这是我所拥有的，但我想在不复制淡入动画的情况下完成此操作：
.enter, .enter-left, .enter-right, .enter-top, .enter-bottom {
animation: fade-in 2s ease-out;
}
.enter-left {
animation: fade-in 2s ease-out, enter-left 1s ease-out;
}如果没有jquery，我如何才能做到这一点呢？有没有一种从本质上附加到属性的方法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-11 08:24:28
使用CSS变量，如下所示。诀窍是将多个动画定义为具有默认值的变量(使用不做任何操作的空动画)，然后您只需在子类中调整值：
.enter, .enter-left, .enter-right, .enter-top, .enter-bottom {
animation: fade-in 2s ease-out, var(--anim1,null),var(--anim2,null);
}
.enter-left {
--anim1:enterleft 1s ease-in;
}
.enter-top {
--anim1:entertop 1s linear;
}
@keyframes fade-in {
from {opacity:0;}
}
@keyframes enterleft {
from {transform:translateX(-100px);}
}
@keyframes entertop {
from {transform:translateY(100px);}
}
@keyframes back {
from{background:blue;}
}
@keyframes null{
0%,100%{font:inherit}
}
.box {
width:100px;
height:100px;
background:red;
display:inline-block;
}<div class="box enter"></div>
<div class="box enter enter-left"></div>
<div class="box enter enter-top" style="--anim2:back 5s"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53715564
复制相关文章
相似问题