MengYiH

列表过渡在vue中使用列表时我们往往也需要设置一个过渡效果代码准备首先我们需要写一个简单的通过点击可以增加列表项的代码这段代码我们通过v-for完成了一个列表项目注意：使用v-for时要尽量避免使用i

我们还使用上一节的例子来学习多个元素和组件的过渡效果多个元素的过渡动画第一步：写入多个DOM元素我们需要添加动画的元素设置为多个div，写入在<transition>标签内第二步：添加CSS动画属性与

JS动画在此前我们使用了CSS来实现动画的效果，同样的，动画效果也可以用JS来实现我们使用与之前相同的点击代码来完成JS动画的学习动画钩子名称与生命周期钩子相同，Vue当中对于动画也声明了相关的钩子，

在此之前，我们已经有了过渡动画以及@keyframes动画的基础，但往往能够单独使用他们是不够的，我们需要将二者结合关于初次加载元素在animate.css的代码基础上我们可以发现，当页面第一次渲染元

我们通过animation来调用前面编写的bounce-in动画，令他持续的时间为1s。在盒子消失时，使用reverse对动画效果进行翻转，使得显示和消失效果对称

name ： string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v" appear ： boolean，是否在初始渲染时使用过渡。默认为 false。 v-en…

动态组件的引入我们需要完成一个点击按钮显示不同子组件的代码我们使用v-if对两个子组件的布尔值进行改变，并添加点击函数来完成目的，但代码略显复杂动态组件还是上面的例子，我们使用动态组件来完成动态组件的

插槽的引入使用场景：当我们父组件向子组件传值时想传递DOM元素，往往需要使用v-html来实现，如下：上述代码虽然实现了将DOM元素传递给子组件，但是如果想要传递的DOM元素内容过多，且都以属性的形式

default：默认值。若参数为非必传，则在没有参数传入时使用default内定义的参数值