使用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

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

1
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

过渡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 来控制是否显示

#Vue

上次更新: 2024/01/30, 00:35:17

← 使用vue实现鼠标框选文件的功能关于Vue项目优化方案总结→