<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> v-enter { margin-left: 100px;} v-enter-active { transition: all 5s;} v-enter-to { margin-left: 10px;} v-leave { margin-left: 10px;} v-leave-active { transition: all 5s;} v-leave-to { margin-left: 100px;} </style> <body> <div> <div> <transition> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </div> <div> <transition mode="in-out"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </div> <div> <transition mode="out-in"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </div> </div> <script> var app = new Vue({ el: '#app', data: { show: true } }); </script>
transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；
mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；
8 多元素动画：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> v-enter { margin-left: 100px;} v-enter-active { transition: all 2s;} v-enter-to { margin-left: 10px;} </style> <body> <div> <transition-group> <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <transition-group tag="ul"> <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <button @click="itemspush(itemslength)">add</button> </div> <script> var app = new Vue({ el: '#app', data: { items: [0,1] } }); </script>
transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
transition-group 必须为每一个子元素指定 key；
8 多元素的位移动画：
<script src="https://www.jb51.net/public/javascripts/vuejs"></script> <style> v-move { transition: all 1s; } </style> <body> <div> <transition-group tag="ul" > <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <button @click="itemsreverse()">reverse</button> </div> <script> var app = new Vue({ el: '#app', data: { items: [0,1,2,3] } }); </script>
transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；
transition 的属性， transition-group 都有，包括 name enter leave；