VUE之动画与animate.css动画库

最新推荐文章于 2024-08-15 10:21:01 发布

web-Queen

最新推荐文章于 2024-08-15 10:21:01 发布

阅读量274

点赞数

文章标签： VUE之动画与animate.css动画库

本文链接：https://blog.csdn.net/weixin_45626166/article/details/102840238

版权

本文介绍了Vue中过渡动画的原理，包括v-enter、v-leave类的切换过程，并通过示例展示了如何创建动画效果。同时，文章探讨了如何进行公共化动画名的定义，提高代码复用性。最后，详细讲解了如何结合animate.css动画库在Vue项目中实现复杂动画，提升开发效率，强调了使用时需注意的事项。

摘要由CSDN通过智能技术生成

过渡动画原理

在进入/离开的过渡中，会有 6 个 class 切换：
v-enter（插入）类原理—动画流程概念图

在这里插入图片描述

v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除
v-leave（移除）类原理—动画流程概念图：

在这里插入图片描述

同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)

概念图

概念图
在这里插入图片描述

过渡

首先回顾下过渡效果的实现

<style type="text/css">
        .area{
   
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .fade-leave,fade-enter-to{
   
            opacity: 1;
        }
        .fade-leave-active,fade-enter-active{
   
            transition: opacity 3s;
        }
        .fade-enter-to,fade-enter{
   
            opacity: 0;
        }
    </style>
<