使用vue的transition标签结合css样式完成动画
Vue1.0中transition
做为标签的行内属性被vue支持。但在Vue2.0中。Vue放弃了旧属性的支持并提供了transition
组件,transition
做为标签被使用。另外,在使用 transition 完成任何元素进入/离开的过渡组件需要满足下列条件:
- 1、条件渲染(
v-if
) - 2、条件展示(
v-show
) - 3、动态组件
- 4、组件根节点。
例如:
<div id="demo">
<button v-on:click="show = !show">点击</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
1
2
3
4
5
6
2
3
4
5
6
new Vue({
el: '#demo',
data: {
show: true
}
})
1
2
3
4
5
6
2
3
4
5
6
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
过渡CSS类名<transition>
中的name属性用于 替换 vue 钩子函数中的类名v-
v-enter
: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。v-enter-active
: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animatio n完成之后移除。v-leave
:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。v-leave-active
: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。
注意
1、<transition>
中只有name属性,不可添加其他标签属性
2、<transition>
中只能有一个子元素并且该子元素需要有 v-show
或者 v-if
来控制是否显示
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13