Question

可以为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的情况下，如何才能做到这一点？有一种本质上可以附加到属性的方法吗？

Answer 1

使用CSS变量，如下所示。诀窍是将多个动画定义为具有默认值的变量（使用不执行任何操作的 null 动画），然后只需调整子类中的值即可：

.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>

附加到CSS属性

1 个答案: