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

2024年 4月 29日 30.8k 0

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

背景

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-1图片

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-2图片

支持变大变小?

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-3图片

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

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-4图片

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-5图片

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

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

css变量

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-6图片

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

Vue 超实用技巧!建立逻辑与动画样式的通道~-7

图片

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论