《Vue.js前端开发实战（慕课版第2版）》课件 第10章 过渡

过渡单元素过渡多元素过渡多组件过渡列表过渡AI辅助编程单元素过渡CSS过渡过渡的类名介绍自定义过渡的类名CSS动画JavaScript钩子函数CSS过渡<transitionname="nameoftransition"><div></div></transition>格式transition用于自动生成CSS过渡类名动态组件四种情形条件渲染条件展示组件根节点CSS过渡<style>.effect-enter-active,.effect-leave-active{transition:opacity1s}.effect-enter-from,.effect-leave-to{opacity:0}</style>CSS代码<divid="app"><buttonv-on:click="show=!show">{{show?'隐藏':'显示'}}</button><br><transitionname="effect"><pv-if="show">机遇只偏爱那些有准备的头脑</p></transition></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{show:true}}}).mount('#app');</script>HTML+JavaScript代码过渡的类名介绍v-enter-to6个classv-enter-fromv-enter-activev-leave-fromv-leave-activev-leave-to定义进入过渡的开始状态定义进入过渡生效时的状态定义进入过渡的结束状态定义离开过渡的开始状态定义离开过渡生效时的状态定义离开过渡的结束状态<transitionname="my">my-enter-fromv-enter-from过渡的类名介绍

在页面中设计一个切换图片的过渡效果，当单击页面中的图片时会切换为另一张图片，在切换时有一个过渡效果。实例自定义过渡的类名enter-to-class6个属性enter-from-classenter-active-classleave-from-classleave-active-classleave-to-class其它第三方CSS动画库（如animate.css）过渡系统自定义过渡的类名

以旋转动画的形式隐藏和显示文字。实例CSS动画

以缩放的动画形式隐藏和显示图片。实例animationend事件v-enter-fromJavaScript钩子函数<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled">

</transition>

当只用JavaScript过渡时，在enter和leave钩子函数中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。JavaScript钩子函数

实现文字显示和隐藏时的不同效果。以缩放的形式显示文字，以旋转动画的形式隐藏文字。实例多元素过渡基础用法key属性过渡模式基础用法v-ifv-else<styletype="text/css">.effect-enter-from,.effect-leave-to{opacity:0;}.effect-enter-active,.effect-leave-active{transition:opacity.6s;}</style>CSS代码<divid="app"><button@click="clearArr">清空</button><transitionname="effect"><olv-if="items.length>0"><liv-for="iteminitems">{{item}}</li></ol><pv-else>内容为空</p></transition></div>HTML代码<scripttype="text/javascript">constvm=Vue.createApp({data(){return{items:['京口瓜洲一水间，','钟山只隔数重山。','春风又绿江南岸，','明月何时照我还。']}},methods:{clearArr:function(){this.items.splice(0);}}}).mount('#app');</script>JavaScript代码key属性<styletype="text/css">.effect-enter-from,.effect-leave-to{opacity:0;}.effect-enter-active,.effect-leave-active{transition:opacity.6s;}</style>CSS代码<divid="app"><button@click="show=!show">切换</button><transitionname="effect"><pv-if="show"key="one">长风破浪会有时，</p><pv-elsekey="two">直挂云帆济沧海。</p></transition></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{show:true}}}).mount('#app');</script>HTML+JavaScript代码过渡模式两种过渡模式in-outout-in新元素先进行过渡，完成之后当前元素过渡离开当前元素先进行过渡，完成之后新元素过渡进入过渡模式<styletype="text/css">.effect-enter-from,.effect-leave-to{opacity:0;}.effect-enter-active,.effect-leave-active{transition:opacity.6s;}</style>CSS代码<divid="app"><transitionname="effect"mode="out-in"><div@click="show=!show":key="show"><pv-if="show">学而不思则罔，</p><pv-else>思而不学则殆。</p></div></transition></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{show:true}}}).mount('#app');</script>HTML+JavaScript代码多组件过渡<style>label{margin-right:10px;}.effect-enter-from,.effect-leave-to{opacity:0;}.effect-enter-active,.effect-leave-active{transition:opacity.6s;}</style><divid="app"><button@click="toggle">切换</button><transitionname="effect"mode="out-in"><component:is="cName"></component></transition></div>HTML+CSS代码<scripttype="text/javascript">constvm=Vue.createApp({data(){return{cName:'interest'}},components:{interest:{template:`<p><p>请选择兴趣爱好：</p><inputtype="checkbox"id="read"value="读书"><labelfor="read">读书</label><inputtype="checkbox"id="movie"value="看电影"><labelfor="movie">看电影</label><inputtype="checkbox"id="play"value="打篮球"><labelfor="play">打篮球</label></p>`},sport:{template:`<p><p>请选择运动项目：</p><inputtype="checkbox"id="track"value="田径"><labelfor="track">田径</label><inputtype="checkbox"id="swim"value="游泳">