(学习心路历程)Vue过渡/动画 VS. CSS3过渡/动画
【此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!】
最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架。
自己之前从来没接触过动画,所以就先学了两天,知道了transition、animation,然后就开始上手了。
毕竟本身就是新手,再加上自己对Vue其实并没有那么理解,于是乎,各种 js 操作 dom(刚好最近在看《JavaScript DOM编程艺术》),改写的代码全都写了,不该写得代码也全都写了,不知道的谁能看出来我用的是Vue框架!!
然后在上周的代码review,被leader和同事指出来了代码中的问题(不得不说,真的学到了很多)
1. 用 js 操作 DOM,完全没把 Vue 的优势利用出来,人家Vue明明可以操作虚拟dom,我还偏要去改变真实dom。
2. 对于一些动画效果,我自己实现就要设置各种 setTimeout 之类的,而Vue中有封装好的 <transition> 组件,可供直接使用。
醍醐灌顶,我先把涉及id的操作都改成了ref,然后开始学习 Vue <transition> 组件。其实学的过程中,会一直犹豫,我的那些动画效果,是用 <transition> 组件实现好呢,还是自己在js代码中手动添加style动画属性好呢(没错,就跟我刚开始做项目之前选框架一样,其实这些没多重要,但自己就是会各种对比,希望找到更合适的解决方案)于是乎,就有了这篇博客~(总自己心里想怪难受的,还不如把它记录下来)
(ps:具体的使用方法我都不介绍了,如果有时间的话,会在其它博客里总结一下)
一、 <transition> 组件
用人家封装好的组件,就肯定有一定的局限性。
首先呢,它只能用于以下几种操作:v-show/v-if、动态组件、组件根节点。其实就是,从无到有、从有到无的这样一个过渡/动画效果。这样就有一定的局限性了,比如那些,点击一下出现的动画效果,就不能用<transition>标签。
但是对于那种,要用v-if/v-show展示的标签,并且在它们进入或消失的时候要有一定的动画效果,那么用这个就超级方便。为啥呢,因为当某个标签通过这种方式消失的时候,设置的过渡/动画效果就没了,要想实现这个效果,就需要在js中,设置 setTimeout,待动画时间结束后,设置 display: none。
当然了,<transition>还是很强大的,而且其中的状态过渡其实自己并不是特别了解。如果真的对其得心应手了,我相信绝对是十分强大的。(一想到这就哭唧唧,又给自己埋了个坑,回头一定要按照官网的例子一个一个复现一遍,希望比现在的自己有更深的理解==)
二、 CSS3 过渡/动画
这个就很随意,也很强大了,你可以实现任何你想要的效果,只要不怕麻烦。
写到最后发现自己写的没啥营养价值,就当是自己的碎碎念吧,以后在使用过程中,理解一定会越来越深刻的,慢慢来!
又给自己埋了好多坑,先列出来,一一实现hhh:
- 好好学习 transition 和 animation 相关的,不止停留在会用阶段。
- 查看 <transition> 源码!!!(相信自己会对动画有更深的理解!!)
- 如果可以的话,希望可以看看大神们是如何写复杂动画的。