描述:
vue的内置组件的演示,以及部分说明。
目录:
transition、TransitionGroup、KeepAlive、Teleport、Suspense。本次仅演示说明:内置组件transition。
1、Transition
描述:
<Transition>组件,是一个内置组件,它可以在任意别的组件中都可以被使用,无需注册。它可以将【进入和离开动画】应用到【通过插槽传递】给它的元素或组件上。
触发的条件有,如下几种方式:
由:v-if所触发的切换
由:v-show所触发的切换
由特殊元素<component>切换的动态组件
案例演示:
html代码:
css代码:
演示效果:
1
2
案例说明:
通过按钮,从而改变p段落标签中Hello的变化,从而展示:hello的离开的动画。
注意:
<Transition>
仅支持【单个元素】或【组件】作为其插槽内容。
如果内容是一个组件,这个组件必须仅有一个根元素。