Vue教程(动画-基础入门)

用户4919348

发布于 2019-07-22 10:49:27

1.2K0

发布于 2019-07-22 10:49:27

文章被收录于专栏：波波烤鸭

在我们显示的页面中动画对于我们来说虽然不是必须的，但是必要的一些动画效果能够提高用户的体验，帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。

Vue 动画

不带动画效果的案例

我们先来实现一个不带动画效果的显示和隐藏的功能。案例代码

<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
    
    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        
        <h3 v-if="flag">这是一个h3</h3>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

效果虽然实现了，但是效果并不是太好。

过渡类名实现动画

Vue 在插入、更新或者移除 DOM 时,我们可以在 CSS 过渡和动画中自动应用 class，

过渡类	说明
v-enter	这是一个时间点,是进入之前，元素的起始状态，此时还没有开始进入
v-enter-active	入场动画的时间段
v-enter-to	入场结束的时间点
v-leave	离场动画开始的时间点
v-leave-active	离场动画的时间段
v-leave-to	这是一个时间点,是动画离开之后，离开的终止状态，此时，元素动画已经结束了

具体使用

1.要使用过渡动画效果的元素必须被 transition标签包裹

2.定义对应的样式

完整代码

<!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="./lib/vue-2.4.0.js"></script>
    <style>
        /**opacity 透明度  transform ：https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX( 150px )
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease
        }
    </style>
</head>
<body>
    
    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

定义transition名称

对于没有定义的transition名称的类名默认前缀是 v-,但如果我们想要自定义前缀，那么可以给transition设置个那么属性，比如：

效果还是一样的。

通过第三方类来实现动画

通过案例中我们需要自定动画效果，这个会显得有点麻烦，这时我们可以使用别人已经定义的动画效果，比如Animate.css来实现，https://daneden.github.io/animate.css/ 官网效果

是不是提供的效果蛮多的呀，我们就来看看具体怎么用吧。

引入资源样式

可以自行在官网下载

在transition中添加对应的样式

https://github.com/daneden/animate.css 具体的样式类可以在此页面选择

注意：duration=“毫秒值” 来统一设置入场和离场时候的动画时长

完整代码:

<!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="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
</head>
<body>
    
    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition 
            enter-active-class="bounceIn" 
            leave-active-class="bounceOut" 
            :duration="{ enter: 200, leave: 400 }">
            <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition> 
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果