Vue中如何实现弹出层动画效果？

本文共计217个文字，预计阅读时间需要1分钟。

1.template div class=home !-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->

transition name=mybox div class=box v-show=boxshow /div / transition /button @click=togglebox 按钮 / /div /

2.data()

1

<template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click="togglebox">按钮</button> </div> </template>

2

data() { return { boxshow: false, }; },

3

methods: { togglebox: function () { this.boxshow = !this.boxshow; }, },

样式：

<style lang="scss" scoped> .box { height: 500px; background-color: rgb(245, 224, 224); overflow: hidden; } /* 给过渡的name加样式 */ .mybox-leave-active, .mybox-enter-active { transition: all 1s ease; } .mybox-leave-active, .mybox-enter { height: 0px !important; } .mybox-leave, .mybox-enter-active { height: 500px; } </style>

效果

到此这篇关于vue中实现弹出层动画效果的示例代码的文章就介绍到这了,更多相关vue弹出层动画内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！