[ 妙用css ]：用css变量解决开发实际问题

theme: smartblue
highlight: foundation

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

各位看官，如何实现以上这种方块的移动，相信对于大家来说并不陌生，无非是几个步骤

1. 设置动画
2. 进行移动
3. 动画循环

<div class="f-box">
    <div class="box"></div>
</div>
<style>
.f-box{
    border: 1px solid gray;
    width: 300px;
    height: 100px;
}
.box{
    width: 100px;
    height:100px;
    background-color: aqua;
    animation: move 3s infinite;
}
@keyframes move {
    50%{
        transform: translateX(calc(300px - 100%)); 
    }
}
</style>

一个简单的移动模块就实现了，但是我们设置的transform: translateX(calc(300px - 100%)); ,这里的300px如果是一个不固定的值，此处我想改为父元素的宽度，但如果不巧的是，父元素的宽度是不固定的会有什么问题。

遇到的问题

这里我对父元素的宽度设置为80% 那么我的move动画中就不知道应该设置多大的宽度了 大部分人到这个地方会考虑使用js代替css的方法来进行书写，但是我们可以通过js计算父元素宽度再放到css中的方式来修改，可能效率会更高一些。

.f-box{
    border: 1px solid gray;
    width: 80%;
    height: 100px;
}
.box{
    width: 100px;
    height:100px;
    background-color: aqua;
    animation: move 3s infinite;
}
@keyframes move {
    50%{
        `transform: translateX(calc(？？？ - 100%)); `
    }
}

使用var函数

var()函数可以代替元素中任何属性中的值的任何部分

我们可以在:root上定义，然后再其他地方使用，其实也可以定义在任意的元素上

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

所以我们需要做的有几个步骤

1. 使用Js获取父元素宽度
2. 将父元素宽度绑定到任意元素上
3. 进行设置动画的时候通过var获取父元素宽度

<style>
@keyframes move {
        50%{
            /* 希望这个地方能改成父元素的宽度 但父元素的宽度不是固定的 */
            /* transform: translateX(父元素宽度 - 100%);  */
            transform: translateX(calc(var(--w) - 100%)); 
        }
    }
</style>
<script >   
    let f = document.querySelector('.f-box')
    console.log(f.clientWidth)
    f.style.setProperty('--w',`${f.clientWidth}px`)
</script>

如图我设置了一个--w的属性，包含了父元素的值，我们可以在控制台中查看效果

通过js+css的方式可以轻松的对父元素的值设置到动画中进去

最后效果