0
点赞
收藏
分享

微信扫一扫

2022年8月26日——vue的内置组件——Transition(1)

描述:

vue的内置组件的演示,以及部分说明。

目录:

transition、TransitionGroup、KeepAlive、Teleport、Suspense。本次仅演示说明:内置组件transition。

1、Transition
描述:

<Transition>组件,是一个内置组件,它可以在任意别的组件中都可以被使用,无需注册。它可以将【进入和离开动画】应用到【通过插槽传递】给它的元素或组件上。

触发的条件有,如下几种方式:

由:v-if所触发的切换

由:v-show所触发的切换

由特殊元素<component>切换的动态组件

案例演示:

html代码:

2022年8月26日——vue的内置组件——Transition(1)_html

css代码:

2022年8月26日——vue的内置组件——Transition(1)_css_02

演示效果:

1

2022年8月26日——vue的内置组件——Transition(1)_css_03

2

2022年8月26日——vue的内置组件——Transition(1)_html_04

案例说明:

通过按钮,从而改变p段落标签中Hello的变化,从而展示:hello的离开的动画。

注意:

​<Transition>​ 仅支持【单个元素】或【组件】作为其插槽内容。

如果内容是一个组件,这个组件必须仅有一个根元素。

2022年8月26日——vue的内置组件——Transition(1)_插槽_05

举报

相关推荐

0 条评论