css变量详解-用js优雅的控制css动画

css变量

css变量可以优雅的利用js控制css动画。改变传统通过js设置css样式的模式。使代码更加整洁。

vue单文件组件，示例一：

<template>
  <ul class="loading c-flex-x-start">
    <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
  </ul>
</template>

<style lang="scss">
.loading {
  // width: 200px;
  // height: 200px;
  padding: 0;
  
  .c-flex-x-start{
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

  li {
    --time: calc((var(--line-index) - 1) * 200ms);
    border-radius: 3px;
    width: 6px;
    height: 30px;
    background-color: #f66;
    animation: beat 1.5s ease-in-out var(--time) infinite;
    list-style-type: none;
    & + li {
      margin-left: 5px;
    }
  }
}
@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
}
</style>

<script>
export default {
  name: "loading",
};
</script>

效果：

vue单文件组件，示例二：

<template>
  <div class="car-part" :style="cssVar">
    <h4>二、css变量和"calc"计算属性结合，使js控制css样式更优雅。</h4>
    <div class="car">我是丰田卡罗拉</div>
  </div>
</template>

<style lang="scss">
.car-part {
    height: 100px;
    .car {
      font-size: calc(var(--size) * 1px);
    }
  }
}
</style>

<script>
export default {
  name: "car",
  data() {
    return {
      cssVar: {
        "--size": 12,
      },
      mark: 0,
      type: "add", // add 或 sub
    };
  },
  mounted() {
    this.change();
  },
  methods: {
    change() {
      requestAnimationFrame(() => {
        let size = this.cssVar["--size"];
        // size++

        this.mark++;

        if (this.mark >= 20) {
          this.mark = 0;
          this.type = this.type === "add" ? (this.type = "sub") : "add";
        }

        if (this.type === "add") {
          this.cssVar["--size"]++;
        } else {
          this.cssVar["--size"]--;
        }

        this.change();
      });
    },
  },
};
</script>

效果：

注：css变量最好和calc计算属性结合使用，因为calc方法可以带单位；使js控制css更优雅，只需要控制定义的css变量即可。