Vue动画篇（二）——使用animate.css类库实现动画

最新推荐文章于 2023-07-13 14:48:24 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2023-07-13 14:48:24 发布

阅读量670

点赞数

分类专栏： Vue.js CSS 文章标签： vue.js css animation 前端

本文链接：https://blog.csdn.net/qq_39055970/article/details/106383373

版权

Vue.js 同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

使用animate.css类库实现动画

使用第三方animate.css类库实现动画

使用第三方animate.css类库实现动画

前面我们已经学习了过渡类动画的六个过程和使用方式，还学会了给不同的transition定义不同的名称用以分别不同的动画。但是如果每一个动画都要自己写就会很浪费时间并且不易实现。因此我们可以借助第三方animate.css类库来实现一些特殊的动画。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <!-- <link rel="stylesheet" href="../animate.css-master/animate.css" /> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />
</head>

<body>
    <div id="app">
        <button @click="flag = !flag">动画</button>
        <!-- 使用 :duration = "毫秒值" 来设置 入场 和 离场 时候的动画时长 -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
            <h3 v-if="flag" class="animated">轻轻的我来了</h3>
        </transition>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        });
    </script>
</body>

</html>

使用方式

（1）引入animate.css库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />

（2）使用方式

 <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
     <h3 v-if="flag" class="animated">轻轻的我来了</h3>
 </transition>

直接在enter-active-class和leave-active-class规定入场动画和出场动画类名，:duration定义持续时间，可以使用
:duration = “毫秒值”
来统一设置入场和离场时候的动画时长，
也可以使用
:duration = “{enter:毫秒值1,leave:毫秒值2}”
来分别设置入场和离场时候的动画时长

（3）不同的动画

查看官网animate官网，点击右侧的类名查看对应动画效果。
在这里插入图片描述

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue动画篇（二）——使用animate.css类库实现动画

使用第三方animate.css类库实现动画前面我们已经学习了过渡类动画的六个过程和使用方式，还学会了给不同的transition定义不同的名称用以分别不同的动画。但是如果每一个动画都要自己写就会很浪费时间并且不易实现。因此我们可以借助第三方animate.css类库来实现一些特殊的动画。实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫