本文作者:淘青松

vue过渡效果transition使用方法

淘青松 4个月前 ( 02-08 ) 131
vue过渡效果transition使用方法摘要: vue过渡分步骤进行,将每个过渡分步骤进行离开状态:第一步leave -- 第二步leave-active   --  第三步leave-to进入状态...

vue过渡分步骤进行,将每个过渡分步骤进行

离开状态:第一步leave -- 第二步leave-active   --  第三步leave-to

进入状态:第一步enter -- 第二步enter-active   --  第三步enter-to

分别执行每个状态实现过渡效果

<transition name="fade">
    <p>隐藏/显示内容</p>
</transition>

<style>

.fade-enter-active,.fade-leave-active{transition:opacity .5s}

.fade-enter,.fade-leave-to{transition:opacity 0}

.fade-enter-to{transition:opacity 1}

</style>


文章版权及转载声明

作者:淘青松本文地址:https://cyansong.com/xue/37.html发布于 4个月前 ( 02-08 )
文章转载或复制请以超链接形式并注明出处青松博客

赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享