CSS自定义属性继承与默认值使用

2019-10-15381次阅读css模块

当我们为一个元素分配动画时,我们可以自定义它的一些属性,比如duration持续时间、delay延迟等等。假设我们有两个类:walk和run。两者共用相同的动画(命名为breath),run执行该动画的速度比walk快(分别为0.5s到2s)。

@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

.walk {
  animation: breath 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

每次重用breath动画时,我们希望动画内的行为基于我们为其分配的属性不同而有所不同。常见方法是复制原始动画并直接在类中调整值:

@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes breathDeep {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1.7);
  }
}

.walk {
  animation: breathDeep 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}

虽然效果很好,但是有一个更好的解决方案就是通过CSS变量继承来重用动画的属性及其值:

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

现在,我们无需编写重复的动画代码即可从同一动画中获得不同的效果!

当然我们还可以设置默认值,这些默认关键值将被元素自己的自定义属性覆盖。

transform: scale(var(--scaleStart, 0.5));

我们也可以使用JavaScript更新CSS自定义属性。

:root {
   --view-height: 0;
}
div {
   height: calc(var(--view-height) - 10px);
}
const vh = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--view-height', vh+'px');


 

上一篇: CSS过滤数据  下一篇: CSS之::backdrop伪元素  

CSS自定义属性继承与默认值使用相关文章