transition文档地址
定义一个背景弹出层实现淡入淡出效果
<template> <div> <button @click="show = !show"> Toggle </button> <transition> <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>
到此这篇关于vue使用transition组件动画效果的实例代码的文章就介绍到这了,更多相关vue transition组件动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: