vue使用transition组件动画效果的实例代码_vue.js

vue使用transition组件动画效果的实例代码

2022-01-11 15:58任我行RQ vue.js

这篇文章主要介绍了vue使用transition组件动画效果的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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>