（学习心路历程）Vue过渡/动画 VS. 过渡/动画

【此篇为本人的个人见解和哔哔赖赖，如果有观点不对的地方，还请大家指出来哇！！】

最近实习在做一个项目，里面应用的动画效果还蛮复杂的，因为本身对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>还是很强大的，而且其中的状态过渡其实自己并不是特别了解。如果真的对其得心应手了，我相信绝对是十分强大的。（一想到这就哭唧唧，又给自己埋了个坑，回头一定要按照官网的例子一个一个复现一遍，希望比现在的自己有更深的理解==）

二、 普通的过渡/动画

这个就很随意，也很强大了，你可以实现任何你想要的效果，只要不怕麻烦。

---

写到最后发现自己写的没啥营养价值，就当是自己的碎碎念吧，以后在使用过程中，理解一定会越来越深刻的，慢慢来！

又给自己埋了好多坑，先列出来，一一实现hhh：

1. 好好学习 transition 和 animation 相关的，不止停留在会用阶段。
2. 查看 <transition> 源码！！！（相信自己会对动画有更深的理解！！）
3. 如果可以的话，希望可以看看大神们是如何写复杂动画的。