Vue 進(jìn)入/離開動畫效果
1、示例代碼
(注:寫到vue單文件中了)
<template> <div> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default { data: function() { return { show: true } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } </style>
2、說明
(1)需要transition 標(biāo)簽包裹。
(2)6個class狀態(tài)
(3)效果:
總結(jié)
以上所述是小編給大家介紹的Vue 進(jìn)入/離開動畫效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新
這篇文章主要介紹了Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08Vue如何利用flex布局實現(xiàn)TV端城市列表功能
用vue開發(fā)了三四個組件了,都是H5的,現(xiàn)在來看看PC是如何玩轉(zhuǎn)組件的,下面這篇文章主要給大家介紹了關(guān)于Vue如何利用flex布局實現(xiàn)TV端城市列表功能的相關(guān)資料,需要的朋友可以參考下2023-01-01如何使用vue slot創(chuàng)建一個模態(tài)框的實例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個模態(tài)框,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05