学习内容:
(1)Vue里面动画和过渡

代码示例:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_vue.js

比如说我给大家举两个例子,当我去做一个div一个元素的时候,我可以给它的背景色变成一个红色,‍‍然后我让它慢慢的变成绿色。‍‍这样的一个缓慢变化的过程,我们会把它叫做颜色的一个过渡效果。‍‍

动画一般指的是什么?比如说我要做一个元素,它可以从上到下来回做一个弹跳,‍‍或者从左到右加速移动,这种过程我们再把它叫做一个动画过程。‍‍

所以首先大家去理解过渡和动画它之间的差异,过渡是从一个状态缓慢到另一个状态,‍‍颜色渐变这样的一些情况,
而动画指的是一个元素 它运动的情况。‍‍在Vue里面‍‍我们做过渡和做动画该怎么去做?

学习借助 css 最基本的‍‍这样的过渡效果和动画效果该怎么去写,我们先在上面去写一些样式:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_css_02

解读:

首先我写一个class,‍‍名字叫做animation,动画。‍‍
它里面会调用一个animation,‍‍然后去使用一个对应的动画效果,比如说我就叫做leftToRight,我让ta 3 秒钟执行动画效果,
但是现在我有leftToRightt这样的一个动画效果吗?没有,所以在上面我要写一个​​​@keyframes​​​,‍‍
​​​@keyframes​​指的是关键帧的一些情况。‍‍

我动画使用这个关键帧来做效果,​​0%​​​的时候,我让它​​transform:translateX(-100px)​​​,一开始让它往左移100个像素,
然后50%的时候,我让它移动50个像素,‍‍
100%的时候我让它向右移动,或者说就回到原点,是这样的动画效果。‍‍

一开始左边‍‍向左移动100像素,然后动画做了一半的时候移到中间,向左偏移,此时实际上只有50个像素了,‍‍

当移动到最后的时候我把它变成0,是这样的动画效果:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_vue.js_03

这样的动画效果,我把它放到animation class里面去管理,‍‍我怎么用动画效果?

我可以这么去写,首先我写了一个div,然后它是一个hello world。

这里我写一个效果叫做什么?叫做​​animate​​,它是一个对象,这个名字表示动画:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画效果_04

动画里面我写一个对象,它 animation 是一个false:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_05

我们可以在这个div标签上给它一个class名字,让它等于​​animate​​​是一个对象,‍‍
表示什么?现在我这个div标签上没有admission对应的 class 的名字,‍‍因为它是一个false,不会展示任何的class名字。‍‍

如果给 animation 改成 true 的话,就能看到它就会有一个动画效果,这个时候它就会有animation这样的过度的‍‍效果,
对应的class名字放到 class上面来。‍‍

我可以再做一个更加有意思的效果,我加一个button,上面写一个切换。

示例代码:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_06

​@click="handleClick"​​。‍‍然后在这里我写一个methods,里面来个handleClick。

我们写一下this点aimate点animation 不等于‍‍ this点animate点animation。‍‍

每次我对 animation对应的值取反,一会儿它就会有 class 名字,一会它就会把 class 名字给它干掉。

这animation一会存在一会不存在,
一开始给它置成一个false:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_css_07

这样的话一开始ta没有 class 就不会有动态效果。

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画效果_08

刷新页面,我们点击切换,‍‍这个时候取反我们应该是有点问题:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_09

它说animation找不到,我们看哪里写错了:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画_10

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_css_11

点击它有一个动画效果,‍‍再点击,其实我把 class的样式给去掉了,我们可以看 dom 结构,现在它上没有class,我点击又有‍‍ class了,又会有一个动画效果,再点击又把这个class清清除,再点击又给它加上class,又会有动画效果:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画效果_12

所以在Vue里面,我们可以借助像这个标签上面添加这种class的‍‍类名来去实现一些动态效果。‍‍刚才我们实现的动态效果实际上它是一个动画对不对?‍‍因为它不是说背景色这种渐变的一些转化,它是直接左右移动这样的一个动画效果。‍‍
所以现在我们实现的是通过class的这种形式做的一个动画,‍‍刚才我们讲的是动画这个东西,现在我们再来做一个过渡,过渡怎么写?

我写这样一个样式一样,也叫做animation,或者叫做一个transition,过渡的。‍‍

transition里面我可以写一个transition,然后我们加一个三秒backgaround-color,‍‍然后我们可以加一个​​ease​​,表示它是一个缓慢增速的过渡效果。‍‍

有了 transition 之后,‍‍我们现在是干什么?现在写的样式它会放到某一个 div 标签上,ta会做一件事情,如果这个div标签或者某一个标签,‍‍它的背景色发生变化的时候,我会在三秒的过程中缓慢的去变化它的背景色。‍‍这块我去再加一个,比如说blue,​​background:blue​​就行了,

再来一个点green:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_vue.js_13

然后我们怎么去写我们的逻辑?
首先我在 div 标签上去写几个样式,‍‍这几个样式它上面除了有一个animation是false之外,我们还要这么去写。‍‍首先它要有transition,一定要有transition这个东西,最后可以把transition写在这里,transition先给它写一个true‍‍,然后我们来看 animate,animate实际上指向的是amimate这个对象:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_14

对象上transition是true,就这个div标签上一定会有transition这样的样式。‍‍

我们保存一下,看下效果:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_css_15

有transition,当你的背景色发生变化的时候,它就会缓慢的过渡。那么我们继续再来写这样的一个东西,‍‍然后我写一个blue,表示blue class 对应的名字, blue给它一个true:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_16

我们再来看,‍‍刷新,它背景色是蓝的:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画_17

接下来我再绑定一个事件,‍‍当点击的时候,这块我要加一个green是false,‍‍也就是说你没有green这个类,一开始它就是一个蓝色的,不是绿色的,

接着我绑定点击事件的时候,我去改什么?
每次点击的时候,我让ta的blue取反,‍‍同时我让ta的green取反:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_css_18

那么就会达到一个效果。‍‍当我点击第一次的时候,blue变成false,green变成true,它的背景色就会变绿,‍‍再点第一次的时候就取反,blue变成true,green变成false又变成蓝色,‍‍这样我们就可以做到背景色点击的时候来回切换的一个效果。‍‍

我们再来看每次背景色切换的时候,我们之前写的样式会不会有这样的一个过渡效果?‍‍

我们回到页面上刷新点击,大家看它缓慢的变绿,再点击有缓慢的变蓝:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_19

通过刚才这段代码,我就给大家写了一个如何在Vue里面去实现‍‍过渡效果,我们可以看一下怎么去实现,

就是我们写了两个不同的class,名字分别叫blue和green去控制它的背景色,‍‍之前我们再在这个div标签上给ta一个样式告诉ta,只要背景色变了,我就通过三秒来帮你缓慢的去做变动,‍‍那么你去改变blue和green是否存在去切换背景色的时候, div标签自动就会带这种‍‍过渡的效果了。‍‍

所以在Vue里面去实现过渡效果和动画效果,大家发现和直接去写css的过渡和动画,‍‍没有太大的区别,只不过里面稍微融入Vue的语法而已。‍‍

我们现在完全是通过 class 的名字来控制样式的,‍‍有没有办法我们不通过class的名字,直接通过style的一些样式来做这个事情?
其实是可以的,‍‍
示例代码:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_20

class现在就等于transition,我们保存一下,到页面上看一下效果刷新,‍‍你上面就有一个transition:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_背景色_21

然后我再给一个style:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画效果_22

我们现在写的就是它有一个transition这样的class,然后同时它上面现在的background是一个blue是蓝色的背景,‍‍我们看一下是不是这样:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_vue.js_23

没问题。点击的时候我就可以直接这么去写了,我就可以直接写:

【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果_动画效果_24

保存一下,我们再回到页面上刷新,切换‍‍变绿,我们再点切换又缓慢的变蓝,你会发现这段代码也可以实现同样的效果。‍‍

只不过我把刚才通过class的方式写的这段代码,把它变成了一个style 样式‍‍去写的这样的一段代码,也就是我们不借助这种class的样式写法去写了,而直接用行内的这种style的‍‍样式语法去写,你会发现它的效果是一样的。‍‍

如果你在Vue里面想实现一些 css 的动画,‍‍其实和之前我们写原生的js基本是一致的,‍‍只不过里面控制 class的存在与否和style的存在与否,我们就‍‍不是手动的操作dom了,而是通过数据来控制。