绚丽的效果肯定需要动画的支持，Vue动画入门开篇

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

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>

效果

在这里插入图片描述

演示效果不是太理想，工具原因，感兴趣的小伙伴可自行运行哦。

上篇文章我们介绍了过渡动画的实现，包括完整的入场和离场动画，但是在实际过程中我们有时可能仅仅需要使用半场动画，比如淘宝购物车的下单处理等。

在这里插入图片描述

前面给大家介绍了动画的基本使用，本文我们来实现一个动画的简单案例，效果如下

在这里插入图片描述

Vue动画案例

1.基础页面

最基础的页面如下:

<!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">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

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

2.添加数据

添加一个基本的列表数据，此处使用到 v-for 指令来循环取数据

在这里插入图片描述

效果:

在这里插入图片描述

3.设置样式

给 li 标签设置对应的样式。

<style>
    li{
        border: 1px dashed red;
        margin-top: 5px;
        line-height: 40px;
        padding-left: 10px;
    }
</style>

效果

在这里插入图片描述

4.添加背景动画

给列表数据添加一个鼠标滑过的 hover 动画效果

<style>
    li{
        border: 1px dashed red;
        margin-top: 5px;
        line-height: 40px;
        padding-left: 10px;
    }
    /*鼠标滑过的动画*/
    li:hover{
        background-color: aquamarine;
        transition: all 0.8s ease;
    }
</style>

效果

在这里插入图片描述

5.添加数据

增加一个给列表添加数据功能，之前已经实现过了，代码如下

在这里插入图片描述

效果

在这里插入图片描述

6.添加数据动画

上面的效果功能是实现了，但是效果比较生硬，我们可以加上动画效果，要使用动画之前我们使用的是 transition 标签，但是现在是在 v-for 中循环遍历的多个 li 标签中我们需要使用 transition-group 标签来包裹.

在这里插入图片描述

动画代码

在这里插入图片描述

效果

在这里插入图片描述

有了一个列滑动入场的效果~

7.删除数据

当我们点击某行数据的时候将这行移除掉，先给 li 绑定一个点击事件，然后del方法中移除当前行

在这里插入图片描述

效果

在这里插入图片描述

如上，移除有些停顿，不是太好，我们可以加如下两个动画来实现。

在这里插入图片描述

效果

在这里插入图片描述

移除一个列的时候，下面的列有往上飘的效果~

8.appear和tag属性

我们在刷新页面，第一次进来的时候，列表没有入场动画，这时我们可以添加一个 appear属性来设置

在这里插入图片描述

最后 transition-group中还有一个 tag属性，用来设置包裹的标签，先来看没有tag的效果

在这里插入图片描述

我们使用tag属性来试试

在这里插入图片描述

这样就没有 span 中间的标签了。

最后完成的代码如下:

在线咨询

上一篇：「前端制作」移动端侧边滑出导航栏
下一篇：初识HTML5(基础篇)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

绚丽的效果肯定需要动画的支持，Vue动画入门开篇

Vue 动画

不带动画效果的案例

过渡类名实现动画

具体使用

定义transition名称

通过第三方类来实现动画

Vue动画案例

1.基础页面

2.添加数据

3.设置样式

4.添加背景动画

5.添加数据

6.添加数据动画

7.删除数据

8.appear和tag属性

您的项目需求