vue使用transition组件动画效果的实例代码
这篇文章主要介绍了vue使用transition组件动画效果的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
定义一个背景弹出层实现淡入淡出效果
| 12345678910111213141516171819202122232425262728293031323334353637383940 | <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" 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> |
到此这篇关于vue使用transition组件动画效果的实例代码的文章就介绍到这了