Vue中动画的实现从基本动画，到炫酷动画。看这一篇就够了

文章目录Vue中的基本动画实现动画类名的重定义使用第三方的动画库我就选择其中一个库做示范其他都一样Vue中的基本动画实现直接一点，基本动画的步骤在需要加动画的地方，加入transition<transition><P v-if="isNum">我是一只小小鸟</P></transition&g...

new 前端

28496人浏览 · 2019-08-18 22:01:00

new 前端 · 2019-08-18 22:01:00 发布

文章目录

Vue中的基本动画实现

直接一点，基本动画的步骤

在需要加动画的地方，加入transition

<transition>
                <P v-if="isNum">我是一只小小鸟</P>
        </transition>

在style中写vue已定义好的类名

     进入前和结束后的状态
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateX(80px);
    }
    进入和离开的动画时间段
    .v-enter-active,.v-leave-active{
        
        transition: all 0.5S ease
    }

这样就已经完成了基本动画了，上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <style>
        进入前和结束后的状态
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateX(80px);
    }
    进入和离开的动画时间段
    .v-enter-active,.v-leave-active{
        
        transition: all 0.5S ease
    }
    
    
    </style>
</head>
<body>
    <div id="box">
        
        <button @click="tags">显示/隐藏</button>
        <transition>
                <P v-if="isNum">我是一只小小鸟</P>
        </transition>
        
    </div>
    <script>

    new Vue({
        el:'#box',
        data:{
            isNum :true
        },
        methods: {
            tags(){
                this.isNum=!this.isNum;
            }
        },
    })    
        
        
    </script>
</body>
</html>

动画类名的重定义

只需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名就可以了

<transition name='my'>
                <P v-if="isNum">我是一只小小鸟</P>
        </transition>

        进入前和结束后的状态
    .my-enter,.my-leave-to{
        opacity: 0;
        transform: translateX(80px);
    }
    进入和离开的动画时间段
    .my-enter-active,.my-leave-active{
        
        transition: all 0.5S ease
    }

使用第三方的动画库

第三方的动画库有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样

在使用第三方库之前，需要在，你要做动画的标签上加个基本类
animated，这个基本类是根据每个库不一样而定的，
我们要用Animated，所以需要加

<transition name='my'>
                <P v-if="isNum" class="animated">我是一只小小鸟</P>
        </transition>

接着就是引入第三方库，你们可以下载。
我比较懒，我就直接npm下载了。

npm install animate.css --save

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">

写上类名，就行了，，提示，千万别下错文件，不然动画也无法实现

 <!-- 进入用lightSpeedIn    离开用 lightSpeedOut -->
        <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut">
                <P v-if="isNum" class="animated">我是一只小小鸟</P>
        </transition>

还有别的动画慢慢更新

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^