transition组件如何在vue中使用
transition组件如何在vue中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
transition文档地址
定义一个背景弹出层实现淡入淡出效果
<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>
看完上述内容,你们掌握transition组件如何在vue中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!