在Vue中如何实现进入/离开动画

来源：动视网责编：小采时间：2020-11-27 19:36:48

在Vue中如何实现进入/离开动画

在Vue中如何实现进入/离开动画:这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下1、示例代码（注：写到vue单文件中了）<template> <p> <button v-on:click="show = !show"&

推荐度：

点击下载本文 文档为doc格式

导读在Vue中如何实现进入/离开动画:这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下1、示例代码（注：写到vue单文件中了）<template> <p> <button v-on:click="show = !show"&

这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下

1、示例代码

（注：写到vue单文件中了）

<template>
 <p>
 <button v-on:click="show = !show">
 Toggle
 </button>
 <transition name="fade">
 <p v-if="show">hello</p>
 </transition>
 </p>
</template>
<script>
 export default {
 data: function() {
 return {
 show: true
 }
 }
 }
</script>
<style>
 .fade-enter-active,
 .fade-leave-active {
 transition: opacity .5s
 }
 
 .fade-enter,
 .fade-leave-to {
 opacity: 0
 }
</style>

2、说明

（1）需要transition 标签包裹。

（2）6个class状态