Vue动画使用心得

青山拂晓

于 2020-04-27 22:11:17 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lizhongyu0922/article/details/105801065

vue 专栏收录该内容

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不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>