第13天 - 16天搞定前端，CSS的动画效果，酷

以往，想在HTML上实现动画效果，要不就用被乔布斯恨死的了Flash 动画，要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后，就可以用CSS在HTML上实现动画了。

要创建 CSS3 动画，你需要了解 @keyframes 规则。现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。

13.1 原生创建动画

用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，动画的名称；

keyframes-selector：必需，动画时长的百分比合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）
css-styles：必需，一个或多个合法的 CSS 样式属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动起来</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

输出结果

13.2 动画库创建

如果每次都要自己手动用CSS去创建动画，那效果太低了。为此，有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果，它里面的动画效果，可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用动画库实现动画</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陈说编程，动画效果行
</main>
</body>
</html>

输出结果

好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

渡效果在交互体验中的重要性不言而喻。以往我们使用jQuery添加或移除元素的类，搭配CSS中定义好的样式，再引用一些JavaScript库之后，可以做出非常复杂、惊艳的动态效果，不过这一套方法仍略显烦琐。Vue.js内置了一套过渡系统，可以在元素从 DOM中插入或移除时自动应用过渡效果。Vue.,js会在适当的时机触发CSS 过渡或动画，用户也可以提供相应的JavaScript钩子函数在过渡过程中执行自定义DOM操作。

8.1 单元素组件过渡和动画

过渡效果就是在DOM元素进行切换、隐藏、插入和移除的时候加入一些酷炫的效果，使得过渡更加自然和美观，那么要想让组件实现动画，最基础的做法就是：

应用过渡效果，在需要加动画的地方，加入transition标签。代码示例如下:

<div id="app">

<transition>

<div v-if="show"></div>

</transition>

</div>

transition特性可以与以下资源一起搭配使用:

v-if
v-show
v-for(v-for（只在插入和删除时触发，使用vue-animated-list插件)
动态组件（见“组件”一章)

8.1.1 初步Vue动画实例

我们先来看个简单基础的动画案例，大家看案例代码：

例8-1 Demo0801.html

<!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>动画</title>
<!-- 在线引入vue.js，必须引入否则无法使用vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#app {
text-align: center;
}
#app div {
width: 200px;
height: 200px;
margin: 30px auto;
background-color: bisque;
border: 1px solid bisque;
}
/* 进入和离开的状态 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
/* .fade-enter定义进入过渡的开始状态 */
/* .fade-leave-to定义离开后的状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">切换</button>
<br>
<transition name="fade">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
show: true
},
})
</script>
</html>

程序的运行结果如下：

图 8- 1 入门案例

点击切换按钮，我们看到div框有一个淡入淡出的效果，原理如下：

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

在案例中我们使用到了一些过渡的类名，现在来看看，在元素在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

图 8- 2 过渡类名

特别说明，对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

8.1.2 CSS过渡

我们常用的过渡都是使用 CSS 的样式规则实现过渡，借助css的样式实现酷炫的过渡效果。

我们来看8-2案例代码：

例8-2 Demo0802.html

<!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>动画</title>
<!-- 在线引入vue.js，必须引入否则无法使用vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#app {
text-align: center;
}
#app div {
width: 200px;
height: 200px;
margin: 30px auto;
background-color: bisque;
border: 1px solid bisque;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active {
transition: all .3s ease;
}
.fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter,
.fade-leave-to {
transform: translateX(160px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">切换</button>
<br>
<transition name="fade">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
show: true
},
})
</script>
</html>

程序的运行结果跟例子8-1的区别是在水平位置上的偏移实现了平滑的过渡。我们可以借鉴之前学习的transform属性，灵活使用，还可以加入更多的样式规则，实现想要的效果。

在这我们需要注意，入场类名有三个：

<name>-enter:入场前

<name>-enter-active:入场持续的过程

<name>-enter-to:入场的结束

出场类名有三个：

<name>-leave:出场前

<name>-leave-active:出场持续的过程

<name>-leave-to:出场的结束

8.1.3 CSS过渡原理

在上一小节中，我们初步了解了Vue使用transition标签实现过渡的效果，接下来我们来看看具体的实现过程，以及原理。

首先，我们来看以下代码：

<!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>动画</title>
<!-- 在线引入vue.js，必须引入否则无法使用vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
      #app {
          text-align: center;
      }
      #app div {
              width: 200px;
              height: 200px;
              margin: 30px auto;
              background-color: bisque;
              border: 1px solid bisque;
      }
      .fade-enter {
            opacity: 0;
      }
      .fade-enter-active {
            transition: opacity 1s;
      }
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<transition name="fade">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
    let vm = new Vue({
      el: '#app',
        data: {
        show: false
    },
    })
</script>
</html>

上面的代码我们只定义了进入前的类，以及进入的持续过程，我们通过过程看原理：

当动画执行的一瞬间，会在内部的div上增加两个class名字，分别是fade-enter和fade-enter-active，之所以是fade-开头，是因为transiton标签name是fade。当动画运行到第二帧的时候，Vue又会帮助你把fade-enter删除，然后添加一个fade-enter-to，再当动画执行到结束的一瞬间，又把fade-enter-active和fade-enter-to删除掉。

注意，在第一帧的时候，fade-enter-active和fade-enter同时存在，并且opacity=0，在第二帧的时候，fade-enter被删除，opacity恢复到原来的初始状态，就是1，在这个过程中，opacity发生了变化，所以fade-enter-active就让这个变化在3秒内完成，完成后进入到fade-enter-to的状态，但是我们没有定义则默认就是过程持续后的状态，opacity为1，此时进入的过渡状态已经完成，删除fade-enter-to和fade-enter-active，这就是元素进入的一个完整的过程。

但是如果要加入fade-enter-to,需要注意下图所示：

如果初始定义中没有加宽和高，则进入动画完成后，该div就会消失，所以最好在这定义好div的样式规则

width height

如果想要某个样式规则在过渡中有效果，就必须写在<name>-enter中也加入，不能只在#app div的初步定义中写，否则在接下来的active和enter-to中则无效。

以上讲解入场的过程原理，接下来看出场的过程原理：

加入以下代码：

#app {
      text-align: center;
}
#app div {
      margin: 30px auto;
      background-color: bisque;
      width: 200px;
      height: 200px;
}
.fade-enter {
      opacity: 0;
      width: 200px;
      height: 200px;
}
.fade-enter-active {
      transition: opacity 1s, width 1s, height 1s;
}
.fade-enter-to {
      border: 1px solid red;
      width: 100px;
      height: 100px;
}
.fade-leave {
      opacity: 0.5;
      width: 50px;
      height: 50px;
}
.fade-leave-active {
      transition: opacity 2s, width 2s, height 2s;
}
.fade-leave-to {
      opacity: 0;
      width: 200px;
      height: 200px;
}

我们发现，进入效果完成后，我们定义了离开过渡的开始状态fade-leave,在data中show的值为false时，开始离开，此时会为类加上fade-leave和fade-leave-active状态，离开的持续过程完成后，进入结束状态fade-leave-to，此时fade-leave已经被删除，出场完成后，fade-leave-active和fade-leave-to被删除。

整个过程总结如下：

【v-enter】

定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除

【v-enter-active】

定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition 或 animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

【v-enter-to】

定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除)，在 transition 或 animation 完成之后移除

【v-leave】

定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除

【v-leave-active】

定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition 或 animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

【v-leave-to】

定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除)，在 transition 或 animation 完成之后移除

以上就是我们整个过渡的过程和原理，接下来我们来看动画。

8.1.4 CSS动画

上一小节，我们实现了CSS过渡，通常过渡使用的是transition,本节课我们使用animation来加入动画效果。

例8-3 Demo0803.html

<!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>动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#app {
text-align: center;
}
#app div {
margin: 30px auto;
background-color: bisque;
width: 200px;
height: 200px;
border-radius: 50%;
}
.fade-enter-active {
animation: ani .5s;
}
.fade-leave-active {
animation: ani .5s reverse;
}
@keyframes ani {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<transition name="fade">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
show: false
},
})
</script>
</html>

图 8- 4 显示效果

例8-3中我们使用了animation给div进入和离开分别设置了缩放的动画效果，也可以借助之前学习的animation的知识实现更多酷炫的效果。

8.1.5 CSS动画和过渡同时使用

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，就需要使用 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型,我们来看下面的案例：

例8-4 Demo0804.html

<!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>动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#app {
text-align: center;
}
#app div {
margin: 30px auto;
background-color: bisque;
width: 200px;
height: 200px;
border-radius: 50%;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
animation: bounce-in 5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<transition name="fade" type="transition">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
show: false
},
})
</script>
</html>

通过以上案例，我们发现如何设置type=‘transition’则主要是监听过渡为主，动画则不会执行1.5倍的缩放，因为过渡1s就完成了。如果type=’animation’则以监听动画为主，就会完整的执行动画，这一点大家在混合使用的时候注意。

8.1.6自定义类名

我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

使用animate的步骤：

第一步：下载

https://daneden.github.io/animate.css

第二步：引入

在线引入：

本地引入：

例8-5 Demo0805.html

<!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>动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
#app {
text-align: center;
}
#app div {
margin: 30px auto;
background-color: bisque;
width: 200px;
height: 200px;
border-radius: 50%;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
animation: bounce-in 5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<transition name="fade" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<div v-if="show"></div>
</transition>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
show: false
},
})
</script>
</html>

至此，便可以实现vue+animate.css动画库的结合使用。它的优势，像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。

注意：

1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class；

2、使用时必须加入animated类名。

8.1.7初始渲染过渡

如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下：

</transition>

如果只写appear,则初始化动画默认和进入/离开过渡效果一样，同样也可以自定义 CSS 类名。

<transition

appear

appear-class="custom-appear-class"

appear-to-class="custom-appear-to-class" (2.1.8+)

appear-active-class="custom-appear-active-class"

</transition>

但是要注意，它只是在第一次渲染的时候才会起作用。

例8-6 Demo0806.html

<!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>动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
#app div {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade" enter-active-class="animated swing fade-enter-active"
leave-active-class="animated swing fade-leave-active">
<div v-show="show">
我是要显示的内容
</div>
</transition>
<button @click="show=!show">点击</button>
</div>
</body>
<script>
var count = 0;
new Vue({
el: '#app',
data: {
show: true
},
methods: {
}
})
</script>
</html>

例8-6中，在页面初始化时候是没有动画效果的，点击按钮的时候才会触发动画；如果想要在页面初始化就有动画效果，就必须加appear,也可以指定初始化动画，如下示例：

<transition appear appear-class="animated shakeY" appear-to-class="animated wobble"

appear-active-class="animated jello" name="fade" enter-active-class="animated swing fade-enter-active"

leave-active-class="animated swing fade-leave-active">

我是要显示的内容

</div>

</transition>

</div>

但是这里有一些问题：关于appear-class、 appear-to-class、 appear-active-class的相同属性那个起作用的问题。

四种情况：（与他们在style中的排列顺序有关系）

1、appear-class、 appear-to-class、 appear-active-class或者 appear-to-class、appear-class、 appear-active-class的排列顺序，此时只有appear-active-class的属性起作用。

2、appear-active-class、appear-class、 appear-to-class

此时appear-active-class的不起作用，由appear-class过渡到appear-to-class属性。

3、appear-class、appear-active-class、 appear-to-class

此时appear-class属性不起作用，由appear-active-class过渡到 appear-to-class属性。

4、 appear-to-class、 appear-active-class、appear-class

此时appear-to-class不起作用，由appear-class过渡到 appear-active-class属性。

8.1.8过渡时间设置

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 <transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：

你也可以定制进入和移出的持续时间：

...

</transition>

8.2 JavaScript钩子函数

上一节我们使用CSS实现的过渡和动画，本节课讲解使用JavaScript钩子函数实现过渡和动画。

JavaScript钩子函数完整过程如下：

enter过程：

before-enter：进入过渡前；

enter：过渡运行时；

after-enter:过渡完成后；

enter-cancelled:过渡被打断；

leave过程：

before-leave:离开过渡运行前；

leave:离开过渡运行时；

after-leave:离开过渡运行后；

leave-cancelled:离开过渡被打断；

使用示例代码：

<transition

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled"

</transition>

/ ...

methods: {

// --------

// 进入中

// --------

beforeEnter: function (el) {

// ...

// 当与 CSS 结合使用时

// 回调函数 done 是可选的

enter: function (el, done) {

// ...

done()

afterEnter: function (el) {

// ...

enterCancelled: function (el) {

// ...

// --------

// 离开时

// --------

beforeLeave: function (el) {

// ...

// 当与 CSS 结合使用时

// 回调函数 done 是可选的

leave: function (el, done) {

// ...

done()

afterLeave: function (el) {

// ...

// leaveCancelled 只用于 v-show 中

leaveCancelled: function (el) {

// ...

}

接下来我们来一个一个的看：

过渡前状态：

示例代码：

<style>

#app div {

width: 200px;

height: 200px;

background-color: antiquewhite;

}

</style>

</head>

<body>

我是要显示的内容

</div>

</transition>

</div>

</body>

var count = 0;

new Vue({

el: '#app',

data: {

show: true

methods: {

//进入过度前把dom元素设置为字体为红色

beforEnter(el) {

console.log('beforEnter触发了');

el.style.color = "red";

}

})

</script>

程序运行效果如下：

图 8- 5 入场前过渡

该示例代码中钩子函数参数el指的时过渡的元素div，给div设置过渡前的样式。

入场钩子enter过渡进入完成时状态：

enter钩子和before-enter稍微有些差异，enter会接受两个参数，语法为enter(el,done)，done为回调函数。当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。

案例：2s后元素字体颜色有红色编程蓝色

示例代码：

我是要显示的内容

</div>

</transition>

</div>

enterFun(el, done) {

setInterval(() => {

el.style.color = "blue";

}, 2000);

done();//告知动画结束

}

入场钩子after-enter过渡完成后：

执行时机，在enter过渡进入完成后触发done()回调函数，告知vue动画执行完毕，下一步执行after-enter过渡完成后钩子函数。

示例代码：

<body>

我是要显示的内容

</div>

</transition>

</div>

</body>

var count = 0;

new Vue({

el: '#app',

data: {

show: true

methods: {

//进入过度前把dom元素设置为字体为红色

beforEnter(el) {

console.log('beforEnter触发了');

el.style.color = "red";

enterFun(el, done) {

setTimeout(() => {

el.style.color = "blue";

}, 2000);

setTimeout(() => {

done();//告知动画结束后才会调用下一帧的afterFn

}, 4000);

afterFn(el) {

el.style.color = "purple";

}

})

</script>

注意：进入动画完成过渡后，要调用done，这样才可以进入下一帧。

入场钩子enter-cancelled过渡被打断：

示例代码：

我是要显示的内容

</div>

</transition>

</div>

calFn() {

console.log('calFn');

}

当过渡开始的时候，不等过渡执行完毕，打断过渡就会执行enter-cancelled。

出场钩子与入场钩子语法类似，如下：
1、before-leave(el)离开过渡运行前
2、leave(el,done)离开过渡运行时
3、after-leave(el)离开过渡运行后
4、leave-cancelled(el)离开过渡被打断时

注意：leave和enter一样，接受两个参数，而且要执行下一帧，必须显示调用done().

8.3 多个元素过渡

如果transition 中包含多个元素，我们来看如何设置：

样式部分设置：

<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity .5s;
}
</style>

Html结构部分：

<div id="app">
<transition mode="out-in">
<div v-if="show" key="hello">hello vue</div>
<div v-else key="Bye">Bye Vue</div>
</transition>
<button @click="handleClick">change</button>
</div>

Script部分：

<script>
var vm = new Vue({
el: '#app',
data:{
show: true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>

以上案例中，要注意，transition中如果多个元素切换，则必须使用key，避免复用。

mode是transition自带的属性，可以是out-in（先出后进）或者 in-out（先进后出）。

8.4 多个组件过渡

在上一节中，transition中有多个html元素，如果transition中有多个自定义组件时候该如何过渡呢，我们看以下代码：

样式部分设置：

<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity .5s;
}
</style>

Html结构部分：

<div id="app">
<transition mode="in-out">
<component :is="type"></component>
</transition>
<button @click="handleClick">change</button>
</div>

Script部分：

<script>
Vue.component('child',{
template: '<div>child</div>'
});
Vue.component('child-one',{
template: '<div>child-one</div>'
})
var vm = new Vue({
el: '#app',
data:{
type: 'child'
},
methods:{
handleClick:function(){
this.type = (this.type === 'child'?'child-one' : 'child');
}
}
})
</script>

该案例中，我们使用动态组件实现切换，其实跟多元素本质是一样的。

8.5 列表过渡

如果transition中同时有多个元素或者组件，我们应该使用transition-group,接下来我们来看案例：

例8-6 Demo0806.html

<!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>动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div v-for="item of list" :key="item.id">
{{item.title}}-{{item.id}}
</div>
</transition-group>
<button @click="handleAdd">Add</button>
</div>
</body>
<script>
var count = 0;
new Vue({
el: '#app',
data: {
list: []
},
methods: {
handleAdd: function () {
this.list.push({
id: count++,
title: 'hello vue'
})
}
}
})
</script>
</html>

图 8- 6 列表效果

在该案例中，我们发现每添加一条数据，都有动画过渡。如果使用v-for,并且循环的每个列表在添加和移除的时候需要设置过渡和动画则必须使用transition-group。

8.6 可复用过渡

过渡可以通过 Vue 的组件系统实现复用。我们可以把一个封装好动画的组件，实现在任何页面的复用。

下面我们来看步骤：

第一步：过渡组件建立：

Vue.component('my-special-transition', {

template: `

<transition name="very-special-transition" mode="out-in" v-on:before-enter="beforeEnter" @enter="enterFn"

v-on:after-enter="afterEnter">

</transition>

props: ['status'],

methods: {

beforeEnter: function (el) {

el.style.color = "red";

enterFn(el, done) {

setTimeout(() => {

el.style.color = 'green';

}, 2000);

setTimeout(() => {

done();

}, 4000);

afterEnter: function (el) {

el.style.color = "blue";

}

})

在这我们使用的插槽，因为不确定我们要过渡的内容，在slot上加上v-if=’status’，这个status的值是从根组件上传过来的。

第二步：调用

示例代码：

<my-special-transition :status="show">

</my-special-transition>

</div>

完整代码：

<body>

<my-special-transition :status="show">

</my-special-transition>

</div>

Vue.component('my-special-transition', {

template: `

<transition name="very-special-transition" mode="out-in" v-on:before-enter="beforeEnter" @enter="enterFn"

v-on:after-enter="afterEnter">

</transition>

props: ['status'],

methods: {

beforeEnter: function (el) {

el.style.color = "red";

enterFn(el, done) {

setTimeout(() => {

el.style.color = 'green';

}, 2000);

setTimeout(() => {

done();

}, 4000);

afterEnter: function (el) {

el.style.color = "blue";

}

})

new Vue({

el: '#app',

data: {

show: false

}

});

</script>

总结：复用过渡组件主要是借助于父子组件的传值。

8.7 案例使用

下面我们来使用学习的过渡动画实现一个简单的小案例：

目标：

显示列表；
添加列表动态添加；
点击列表每一项实现动画删除；

例8-7 Demo0807.html

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul {
list-style: none;
}
li {
border: 1px dashed green;
height: 50px;
line-height: 50px;
margin: 5px;
}
li:hover {
background-color: brown;
transition: all 1s ease;
}
.v-enter,
.v-leave-to {
transform: translateY(70px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
.v-move {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<label for="id">
<input type="text" v-model="pid" id="id">
</label>
<label for="name">
<input type="text" v-model="pname" id="name">
</label>
<label>
<input type="button" value="添加" @click="addfn">
</label>
<ul>
<transition-group>
<li v-for="(p,i) in list" :key="p.id" @click="del(i)">
{{p.id}} ========== {{p.name}}
</li>
</transition-group>
</ul>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
pid: "",
pname: "",
list: [
{ id: 1001, name: "陈羽凡" },
{ id: 1002, name: "胡海泉" },
{ id: 1003, name: "刘德华" },
{ id: 1004, name: "成龙" }
]
},
methods: {
addfn() {
this.list.push({ id: this.pid, name: this.pname });
this.pid = this.pname = "";
},
del(i) {
this.list.splice(i, 1);
}
}
});
</script>
</body>
</html>

程序运行效果如下：

图 8- 7 过渡效果

本案例，在添加的时候设置了过渡效果，在点击每一条的时候实现过渡删除每一条目；核心代码主要是使用列表过渡。

8.8 本章小结

单元素组件的过渡使用transition标签，以及v-if,v-show，结合Vue过渡实现组件的切换和过渡。动画主要使用CSS动画和第三方动画库。
transition里面也可以放多个html元素实现过渡，主要是借助v-if-,v-els--if；
javascript的钩子主要有进入过渡的过程以及离开过渡的过程，整个过程包括八个钩子函数；
Transition里面也可以放置动态组件，借助于component标签；
借助于Vue的组件系统，也可以在封装组件的时候加上过渡，这样就形成了可复用的过渡组件。

8.9 理论试题与实践练习

1.编程题

在图书管理系统的基础上：

实现页面打开的时候，添加界面隐藏；
点击添加按钮的时候实现组件过渡出现；
点击删除的时候实现动画删除；

天我们学习的内容有：过渡，动画，转换，伸缩盒子。

可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~

1.过渡

在css3中，有一个属性可以设置过渡效果。

它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例：通过transition设置焦点过渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意页面中的代码：

第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。

第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位，设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。

所以，我们通过transition这个复合属性设置的过渡效果为：

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。

2.动画：

在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。

但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。

那么，动画animation就可以满足我们的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代码效果如下：

同样，让我们来关注编写的代码：

1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候，将left设置为0px，top设置为0px*/

0%{

left:0px;

top:0px;

}

/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，

背景颜色过渡为绿色，圆角过渡为0(无圆角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，

背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，

背景颜色过渡为灰色，圆角过渡为0(无圆角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，

背景颜色过渡为红色，圆角过渡为50%(正圆)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。

2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。

就是下面这句代码了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一个复合属性，设置了6个值，分别对应：

animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。

animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒

animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。

animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。

animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。

animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是

alternate则表示要反向播放动画，大家也可以自己试一试这个效果。

最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。

3.转换

在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子的位置是left:0,top:0;

但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。

B.旋转

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子应该是四四方方的。

但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。

进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。

C.缩放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放

scale的第一个参数为0.5,表示横向缩小为0.5倍

scale的第二个参数为0.25，表示纵向缩小为0.25倍。

scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。

小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。

4.flex布局

Flex布局，可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代码效果如下：

如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。

接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：

所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列

而flex-end是让所有的子元素从元素的右侧开始排列。

我们再来更改一下，将justify-content设置为center，效果如下图所示：

更厉害了，子元素在父盒子的中央位置排列显示了。

然后，我们再将justify-content设置为space-around，效果如下图所示：

它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。

所以我们推荐将justify-content设置为space-between，效果如下图：

我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。

这两个属性可以设置的值如下：

flex-wrap: nowrap;//不换行，会自动收缩

flex-wrap: warp;//换行，会自动收缩

flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。

flex-direction:row; //从左至右一行一行进行子元素的排列

flex-direction:column; //从上到下一列一列进行子元素的排列

flex-direction:row-reverse; //从右至左一行一行进行子元素的排列

flex-direction:column-reverse; //从下到上一列一列进行子元素的排列

案例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）

代码效果如下：

如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：

如果将flex-direction: column;,则会纵向排列元素，效果如下图：

除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。

除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下图：

我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.

这是什么意思呢？

四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。

同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。

原文来源于：黑马程序员社区

学习资源：

想学习css，可以关注：黑马程序员头条号，后台回复：css

在线咨询

上一篇：学用系列｜BookxNote更新1.0.0.67，阅读思维图支持样式切换
下一篇：Qt编写自定义控件-光晕日历

您的项目需求

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

整合营销服务商

第13天 - 16天搞定前端，CSS的动画效果，酷

13.1 原生创建动画

13.2 动画库创建

8.1 单元素组件过渡和动画

8.1.1 初步Vue动画实例

8.1.2 CSS过渡

8.1.3 CSS过渡原理

8.1.4 CSS动画

8.1.5 CSS动画和过渡同时使用

8.1.6自定义类名

8.1.7初始渲染过渡

8.1.8过渡时间设置

8.2 JavaScript钩子函数

过渡前状态：

入场钩子enter过渡进入完成时状态：

入场钩子after-enter过渡完成后：

注意：进入动画完成过渡后，要调用done，这样才可以进入下一帧。

入场钩子enter-cancelled过渡被打断：

8.3 多个元素过渡

8.4 多个组件过渡

8.5 列表过渡

8.6 可复用过渡

8.7 案例使用

8.8 本章小结

8.9 理论试题与实践练习

1.编程题

您的项目需求