Vue动画使用心得

最新推荐文章于 2024-05-23 19:22:50 发布

原创最新推荐文章于 2024-05-23 19:22:50 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue中使用过渡动画，通过代码示例展示了如何为元素的进入和离开定义动画效果。具体包括设置动画类名、定义关键帧动画实现透明度渐变。

不bb直接上代码：

<transition name="aa">
    <span>我是文本内容</span>
</transition>

<style>
    .aa-enter-active {
        animation: run 0.5s;
    }
    .aa-leave-actvie {
        animation: run .5s reverse
    }

    @keyframe run {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
</style>