标签：efault col script 使用 初始化 active turn round 运动
1.使用transition标签包裹要运动的元素，给transition标签定义一个name属性
2.定义6个类名，每个类名都要用trnasition的name的属性值作为前缀。
(1) v-enter-active 和 v-leave-active
这两个类，定义过渡的属性
.v-enter-active,.v-leave-active{ transition:all 5s }
(2)v-enter 定义进入动画初始化状态
(3) v-enter-to 定义进入动画的结束状态
(4)v-leave 定义离开动画的初始化状态
(5)v-leave-to 定义离开动画的结束状态
例子：
<template> <div> <transition name="test"> <div class="box" v-show="show"></div> </transition> <button @click="toggle()">切换</button> </div> </template> <script> export default { name: "Home", data () { return { show:true }; }, methods:{ toggle(){ this.show = !this.show; } } } </script> <style lang="css" scoped> .box{ width: 300px; height: 300px; background-color: red; } .test-enter-active,.test-leave-active{ transition: all 3s; } .test-enter{ width: 100px; height: 100px; opacity: .3; } .test-enter-to{ width: 300px; height: 300px; opacity: 1; } .test-leave{ width: 300px; height: 300px; opacity: 1; } .test-leave-to{ width: 100px; height: 100px; opacity: 0; } </style>
标签：efault col script 使用 初始化 active turn round 运动
原文地址：https://www.cnblogs.com/luguankun/p/10880000.html
