目录
◆ 01 VUE过渡动画简介(Vue transition animation )
◆ 02 单元素过渡与动画(Single Component )
✎ VUE过渡与动画
◆ 前言
通过前面的模板指令v-if和v-show等,我们可以轻松的实现元素状态的改变,比如改变元素的显示与隐藏
控制元素状态变化
一步一步实现功能,第一步要实现显示和隐藏的效果
✎ vue过渡效果-单元素过渡
◆ 01 VUE过渡动画简介(Vue transition animation )
过渡与动画基本概念
在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡与动画效果。只要按照VUE的使用规则,就可以轻松地实现效果丰富的过渡与动画效果。
之前我们已经学会了动态组件,并且会进行组件之间的切换,但是切换的效果是十分僵硬的,使用上VUE的过渡与动画效果就会十分自然了,那么如何实现呢?首先我们先来看单个网页元素实现过渡与动画如何操作。
先看过渡过程,在VUE中实现过渡过程有4个状态,2个过程,这个状态我们以元素的出现和隐藏为例,比如说,元素的透明度从0变为1的过程等等。
-
利用transition标记将p标签包裹起来,指明这个区域里面的元素它要添加一个过渡的处理,
-
会给这个transition指明一个name【会在你定义样式的过程中使用到】
-
v-enter v-enter-to v-leave v-leave-to,v会和transition定义的name进行替换