CSS变量的妙用

CSS变量的妙用

1.引言

以下是一个非常简单的动画效果，页面上一个小球在来回平移，只需要通过css的animation动画就可以实现，但是在实现过程中发现一个地方比较难处理，就是这个小球的平移量到底该设为多少，下面让我们一起来实现一下。

2.思路分析

    通过下面的运动轨迹我们可以得出，平移的宽度为（父元素的宽度－ 子元素的宽度）。子元素的宽度我们可以设为100%，但是在css中，我们没法直接写出父元素的宽度。那么我们可以立马想到使用js来获取父元素的宽度。

    那么就出现另一个问题：使用js可以获取父元素宽度，但是js实现动画又比较复杂，可不可以将js与css结合一下，直接告诉css父元素的宽度值？

3.实现

JS部分

window.onload = function() {
  const containerDom = document.getElementById('container');
  const containerWidth = containerDom.offsetWidth;
  containerDom.style.setProperty('--w', containerWidth + 'px')  // 给父元素设置一个css变量
}

CSS部分

  .circleBox {
    ...
    animation: move 6s linear infinite;
  }
  @keyframes move {
    50% {
      transform: translateX(calc(var(--w) - 100%));
    }
  }

4.总结

       通过以上案例中，先给小球的父元素设置了一个CSS变量--w,并且我们将js获取到的父元素的宽度给了这个--w量， 然后在CSS中直接使用var('--w')就获取到了父元素的宽度。

       我们可以知道，JS跟CSS在很多情况下可以很好的结合起来，学会在适当的地方合理运用，可以大大节省我们的代码复杂度及代码量。

最后再梳理一下逻辑：

1.JS中使用dom元素的setProperty方法给绑定一个style属性，即我们所需要的CSS变量。
2.CSS中使用var('CSS变量')来直接获取到值