$nextTick()+过渡与动画+TodoList案例_动画效果

提示：本文主要对$nextTick()+过渡与动画进行总结

---

前言

提示：这里可以添加本文要记录的大概内容：

我们已经做了todoList的编辑功能，本篇文章将对上一篇文章遗留的问题进行解决
同时，本文将对 过渡与动画做比较详细的讲述，同时对TodoList案例的添加和删除功能增加动画效果

---

提示：以下是本篇文章正文内容

一、$nextTick()

完善编辑功能：
当点击编辑按钮时，应该让出来的输入框获取到焦点

MyItem.vue

发现点击后，依然没有获取到焦点

原因：
如下代码执行时，input框处于display，方法没执行完，模板没有重新解析

解决：

方案一：定时器

方式二：nextTick()
nextTick所指定的回调，会在DOM节点更新完毕之后再执行

二、过渡与动画

2.1 动画效果

点击按钮时，可以切换文字的效果，是带有动画效果的

（1） 实现效果

（2） 初步验证

（3） 使用vue

（4） 细节

细节一：
每个过渡可以起名字，如果起名字了，下方的class不能在用v-enter-active，而应该是hello-enter-active

细节二：
一上来就是展示的，现在想让他一出现就带有动画效果
配置appear

细节3：
transition在解析时没有形成真正的元素，
transition是给vue使用的

2.2 过渡效果

同样实现上方效果，使用过渡

• 进入

• 离开

• 优化

2.3 多个元素过渡

多个元素需要同样的过渡效果
一个展示，另一个就不能展示

2.4 集成第三方动画

三、总结过渡与动画

四、TodoList案例_过渡与动画

实现：
添加和删除todo的时候都是缓慢的。

改成从右边出来，这样效果明显

刷新后的效果：

添加后的效果

删除后的效果

另一种实现方式：
不给item里的li加transition，给List加

MyItem.vue不变:

MyList.vue: