前端动画的几种实现方式

Vue.js前端动画实现：Vue自带过渡、Animate.css与Element-UI

最新推荐文章于 2024-06-07 16:01:04 发布

原创最新推荐文章于 2024-06-07 16:01:04 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

前端知识专栏收录该内容

24 篇文章

订阅专栏

前端动画的几种实现方式

vue自带过渡动画

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

vue+animate.css简单动画+过度动画

实现方式：

安装或者下载animate

npm

npm install animate.css --save

yarn

yarn add animate.css

CDN

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

代码部分

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/animate.css" />
</head>

<body>

    <div id="app">
        <div>
            <input type="button" value="显示/隐藏" @click="show=!show">
            <transition 
                enter-active-class="animate__animated animate__bounceInUp"  
                leave-active-class="animate__animated animate__bounceOutDown">
                <h3 v-if="show">过渡动画</h3>
                <!--通过一个标识符，然后可以不停将转换true/false，达到隐藏显示的目的-->
            </transition>
            <!--将需要转换的动画用transition承载，在头部实现样式-->
            <!--:duration可以一同设置进场和出场的时间，:duration="{enter:1000,leave:4000}分别设置"-->
        </div>
    </div>

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

</html>

效果：

在这里插入图片描述

vue+element-ui过渡动画

官网链接： https://element.eleme.cn/#/zh-CN/component/transition
vue+anime.js简单动画

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库，拥有简单而强大的API。
可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。