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" :></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" :>
<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;
}
if (pe === "add") {
this.cssVar["--size"]++;
} else {
this.cssVar["--size"]--;
}
this.change();js控制滚动条
});
},
},
};
</script>
效果：
注：css变量最好和calc计算属性结合使⽤，因为calc⽅法可以带单位；使js控制css更优雅，只需要控制定义的css变量即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。