Vue 进入/离开动画


1、示例代码

(注:写到vue单文件中了)

<template>
    <div>
        <button v-on:click="show = !show"> Toggle </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</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状态

 

(3)效果:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM