《Vue.j实战》一书 p117 页练习 2 试做
练习2 : 尝试在切换pane 的显示与隐藏时,使用滑动的动画。提示: 可以使用css 3 的transform:
translateX 。
同练习1相比,对pane组件进行了改动,将组件 pane 变成了可利用的过渡组件:
1,在template中,用transition组件包裹住 div 元素,设置 name 和mode 特性。
2,在style中,添加 .pane等 class。其实 类 pane在书中已经有设置,只是未填写具体内容,算是作者给的一个提示线索吧。
<template> <transition name="fade" mode="out-in"> <div class="pane" v-show="show"> <slot></slot> </div> </transition> </template> <style> .pane{ display: inline-block; } .fade-enter-active,.fade-leave-active{ position: absolute; transition: all .8s ease; } .fade-enter, .fade-leave-to{ transform: translateX(100px); opacity: 0; } </style>