Vue-过渡&动画

最新推荐文章于 2024-07-16 15:39:55 发布

是Ryan吖

最新推荐文章于 2024-07-16 15:39:55 发布

阅读量480

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45497246/article/details/106141248

版权

本文详细介绍了Vue中如何实现CSS动画，包括Vue的CSS过渡原理，animate.css的使用，以及如何结合transition和animate创建动画。同时，还讨论了JS动画与Velocity.js的结合，如何处理多个元素和组件的过渡，列表过渡的实现，以及如何封装可复用的动画组件。

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

1. Vue中的CSS动画原理

如果要元素具有动画效果，则需要在元素外部包裹一个transition（过渡）标签，这样Vie就会自动帮我们构建一个动画流程；同时我们可以给标签通过name属性取一个名字，（如果不取名，Vue默认的class前缀是v）例如：

    <div id="root">
        <transition name="fade">
            <div v-if="show">Hello</div>
        </transition>
        <button @click="handleClick">click</button>
    </div>

（1）显示过渡效果的流程：
在这里插入图片描述

在动画即将被执行的一瞬间，它会往div元素里边增加两个class——fade-enter和fade-enter-active；
当动画第一帧执行完毕，即将开始第二帧动画的时候，Vue会帮助我们干两件事情——去掉fade-enter这个class，同时增加fade-enter-to这个新的class；
动画会继续执行，直到要结束的时候，把之前增加的两个class——fade-enter-active和fade-enter-to删除掉

（2）隐藏过渡效果的流程：
在这里插入图片描述
跟显示的流程类似，这里我就不赘述了嘻嘻😃

实际上Vue实现动画是通过——在某一时刻，自动地往一些标签上增加一些样式来实现的

kangkang示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画原理</title>
    <script src="JS/vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to {
    
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active{
    
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
            <div v-if="show">hello</div>
        </transition>