如何使用animate.css动画库

最新推荐文章于 2024-05-06 19:28:55 发布

卑微前端在线挨打

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量5k

点赞数 2

文章标签： css javascript 前端动画

本文链接：https://blog.csdn.net/qczzc/article/details/130788280

版权

文章目录

前言
一、animate.css是什么？
二、使用步骤
三、dom

前言

随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库

提示：以下是本篇文章正文内容，下面案例可供参考

一、animate.css是什么？

是一个前端的动画库，animate.css官网

二、使用步骤

1.引入库

1.1、在工程项目中引入

用npm安装

 npm install animate.css --save

在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦)

//main.js
improt import 'animate.css';

1.2、在html文件引入

在head中

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

2.使用方法

在 transition 标签中给对应动作的类名加上动画库中的类就行啦。
leave-active-class 消失时候的效果动画
enter-active-class 显示时候的效果动画
其次需要注意的是，在添加动画前需要在动画名前加入animate.css的前缀animate__animated
代码如下（示例）：

<!-- 两个按钮 login register -->
            <div>
                <transition leave-active-class = 'animate__animated animate__fadeOutLeft' mode="out-in">
                    <button @click="goToLogin()" v-if="goOut">Login</button>
                </transition>

                <transition leave-active-class = 'animate__animated animate__fadeOutRight' mode="out-in">
                    <button @click="goToRegister()" v-if="goOut">Register</button>
                </transition>
            </div>

值得注意的是：需要将要使用动画的标签或组件加入到 transition标签当中、其次加入的标签需要有显示或者不显示的触发，比如v-if条件满足就显示...

三、dom

<!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>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        .content {
            width: 100%;
            height: 100vh;
        }
        
        .content>div {
            /* border: #123 1px solid; */
            top: 40%;
            position: relative;
            margin-left: 50%;
            left: -17%;
            width: 35%;
            height: auto;
            display: flex;
            justify-content: space-between;
        }
        
        .content>div button {
            background-color: rgb(59, 179, 116);
            border: none;
            border-radius: 30px;
            width: 200px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: larger;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 550;
            color: #fff;
        }
        
        .content>div button:hover {
            background-color: rgba(59, 179, 117, 0.591);
        }
        
        .enter {
            background-color: rgb(59, 179, 116);
            width: 100%;
            padding-top: 20%;
            text-align: center;
            /* display: flex;
            justify-content: center;
            align-items: center; */
            font-size: larger;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 550;
            color: #fff;
        }
        
        .enter>button {
            width: 200px;
            position: relative;
            top: 20px;
            margin-left: 50%;
            left: -100px
        }
        
        .enter>button:hover {
            background-color: rgba(59, 179, 117, 0.591);
        }
    </style>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<body>
    <div id="app"></div>
    <template id="root">
        <div class="content" >
            <!-- 两个按钮 login register -->
            <div>
                <transition leave-active-class = 'animate__animated animate__fadeOutLeft' mode="out-in">
                    <button @click="goToLogin()" v-if="goOut">Login</button>
                </transition>

                <transition leave-active-class = 'animate__animated animate__fadeOutRight' mode="out-in">
                    <button @click="goToRegister()" v-if="goOut">Register</button>
                </transition>
            </div>
            <!-- 出来的界面 login View  或者 register View -->
            <transition enter-active-class = 'animate__animated animate__fadeInDown' mode="out-in">
                <div v-if="!goOut" style="width: 100%; height: 100vh;top:0;left: 0;margin-left: 0px;">
                    <!-- 动画效果 -->
                    <transition enter-active-class = 'animate__animated animate__fadeIn animate__delay-1s' 
                    leave-active-class = 'animate__animated animate__fadeOut animate__delay-1s'
                    >
                        <div v-show ='showLogin' class="enter">
                            This is login<br>
                            <button style="border:#fff 2px solid; font-size: 18px;"
                            @click = "change()"
                            >Back to register</button>
                        </div>
                    </transition>

                    <transition enter-active-class = 'animate__animated animate__fadeIn animate__delay-1s' 
                    leave-active-class = 'animate__animated animate__fadeOut animate__delay-1s'

                    >    
                        <div v-show ='showRegister' class="enter">
                            This is register<br>
                            <button style="border:#fff 2px solid; font-size: 18px;"@click = "change()" >Back to login</button>

                        </div>
                    </transition>
                </div>
            </transition>
        </div>
    </template>
</body>

<script>
    const {
        ref
    } = Vue
    const app = Vue.createApp({
        template: "#root",
        setup(props, context) {
            let showLogin = ref(false) //login 是否展示
            let showRegister = ref(false) //register 是否展示
            let goOut = ref(true) // 第一展示页面
            let goToLogin = () => {
                showLogin.value = true
                showRegister.value = false
                goOut.value = false
            }
            let goToRegister = () => {
                showRegister.value = true
                showLogin.value = false
                goOut.value = false
            }

            let change = () => {
                showLogin.value = !showLogin.value
                showRegister.value = !showRegister.value
            }
            return {
                showLogin,
                showRegister,
                goOut,
                goToLogin,
                goToRegister,
                change
            }
        }
    })
    app.mount("#app")
</script>

</html>

卑微前端在线挨打

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
如何使用animate.css动画库

随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦)1.2、在html文件引入在head中2.使用方法在 transition 标签中给对应动作的类名加上动画库中的类就行啦。代码如下（示例）：
复制链接

扫一扫