vue使用transition組件動(dòng)畫效果的實(shí)例代碼
transition文檔地址定義一個(gè)背景彈出層實(shí)現(xiàn)淡入淡出效果
<template> <div> <button @click='show = !show'> Toggle </button> <transition name='fadeBg'> <div v-if='show'>hello</div> </transition> </div></template><script> export default { data: () => ({ show: true }), };</script><style lang='less' scoped> .fadeBg-enter-active, .fadeBg-leave-active { transition: opacity 0.3s ease; } .fadeBg-enter, .fadeBg-leave-to { opacity: 0; } .bg { position: fixed; top: 20px; left: 0; z-index: 105; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }</style>
到此這篇關(guān)于vue使用transition組件動(dòng)畫效果的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue transition組件動(dòng)畫內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象2. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作3. ASP新手必備的基礎(chǔ)知識(shí)4. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建( Postfix )5. asp文件用什么軟件編輯6. python 爬取豆瓣網(wǎng)頁(yè)的示例7. python 實(shí)現(xiàn)有道翻譯功能8. JS中6個(gè)對(duì)象數(shù)組去重的方法9. vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)10. 利用CSS制作3D動(dòng)畫

網(wǎng)公網(wǎng)安備