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

最新推荐文章于 2024-08-07 15:34:36 发布

原创最新推荐文章于 2024-08-07 15:34:36 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #css

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Animate.css，一个包含多种预设动画效果的CSS3库，如抖动、闪烁、弹跳等。通过示例展示了如何在Vue.js中结合使用Animate.css实现元素的入场和离场动画，例如点击按钮控制h3元素的显示和隐藏。提供了详细的语法参考链接以及在线演示地址，帮助开发者轻松实现丰富的网页动画效果。

Animate.css ——CSS3动画库

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

https://www.dowebok.com/demo/2014/98/
在该网址可查看每个class的效果

在这里插入图片描述

语法参考网址：
https://animate.style/ 这里较详细

例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 引入animate.css类库，其几乎包含了所有常见的动画效果 -->
    <link rel="stylesheet" href="../lib/animate.css-main/animate.css">
</head>

<body>

    <div id="app">

        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求:点击按钮， 让h3显示，再点击，让h3隐藏 -->
        <!-- 1.使用transition 元素,把需要被动画控制的元素，包裹起来 -->
        <!-- transition 元素，是Vue官方提供的 -->

        <!-- 使用了animate.css 我们这里出场和入场时间段选用库中的 animate__bounceOut和animate__bounceIn类的效果
        每个类前还需加个基础的类：animate__animated  
（当然也可以加在元素上 如<h3 class="animate__animated"-->
        <transition enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut" :duration="700">  <!--duration是进场和出场时动画时长，单位毫秒，也可分别设置 :deration="{ enter:200, leave:500 }"-->>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>

    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        })
    </script>
</body>

</html>