當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

单元素/组件的过渡以及过渡钩子的运用

發布時間：2023/12/16 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了单元素/组件的过渡以及过渡钩子的运用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

單元素/組件的過渡

Vue 提供了 transition 的封裝組件，可以給任何元素和組件添加進入/離開過渡;
對哪一塊內容用動畫,就對哪一款內容用transition標簽;然后name帶一個fade,fade和class屬性一樣的;

過渡鉤子

eg

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>單元素/組件的過渡和過渡鉤子</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">/* 過渡樣式fade-enter-active進入 ; fade-leave-active離開*/.fade-enter-active, .fade-leave-active {transition: opacity .5s;}/* fade-enter進入 fade-leave-to離開 */.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}</style></head><body><div id="app"><button type="button" @click="isShow=!isShow">點擊</button><transition name="fade" @before-enter="beforeEnter" @after-leave="afterLeave"><p v-show="isShow"> hello Vue </p></transition></div></body> </html> <script type="text/javascript"> var vm = new Vue({el:'#app',data:{ isShow:true},methods:{// 進來之前的操作beforeEnter:function(){console.log('beforeEnter')},// 離開之后的操作afterLeave:function(){console.log('afterLeave') }} }); </script>

總結

以上是生活随笔為你收集整理的单元素/组件的过渡以及过渡钩子的运用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。