Vue 超实用技巧！建立逻辑与动画样式的通道

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

背景

我们公司的页面上，有一个页面有一个动画效果，具体代码我就不方便贴出来，我就拿一个小例子来大体展示一下这个简单的动画效果。

图片

其实这个效果很好做，这不是问题的重点，我先贴出来这个动画的代码。

图片

支持变大变小？

产品提出了一个需求，那就是这个球要支持变大变小，我心想，那还不简单，搞两个按钮，点击设置球的宽高不就行了？

图片

但是我写出来后发现一个问题，球的宽高变大变小，他的动画出现了问题。

• 变大了，那么这个球会移动出父节点
• 变小了，那么这个球会到达不了父节点的边界

图片

其实问题很容易看出来，球的宽高变大变小了，但是动画计算的移动距离一直是calc(100% - 100px)。

图片

所以解决办法就是，当球的大小变了的时候，这个100px也得跟着改成实时的球宽才行。

但是这个100px是写在 keyframes 中啊，我要怎么去实时地去更改呢？JavaScript怎么才能跟class去联动呢？

css变量

诶！可以用css变量去做呀！我可以在球的节点上设置一个样式，这个样式是一个css常量，当我修改球宽高时，顺便也修改这个css常量，然后在 keyframes 中去使用这个css变量即可！

图片

现在球的宽高再怎么变，它都能一直保持同样的移动效果，不会达不到边界也不会超出边界了！！！

图片