14_尚硅谷_Vue_动画

啊，那我们把这个课件打开啊。好，那我们就继续往下看啊，就是我们这个核心部分呢，还有一些，呃，下一个呢，我们来看另外一个东西叫过渡与动画。嗯。过渡在应该这个这两个在CSS里面都有吧，啊过渡单词。是不是穿真些啊？传真险动画爱你危些是吧？OK，行，很好，嗯，这13说什么呢？在说我们的某一个元素。在显示隐藏的过程中有一个过渡，或者有一个动画的效果。能不能好，我们最终呢，会一共要做出两个效果，大家可以看一下，就是我们这里面呢，有一个透。

那拓的时候大家看的那个元素是什么？是不是有一个渐变的一个过程。对不，而下面这个呢，不仅在慢慢消失，还有一个移动的一个效果啊，我们等会来做一下，那还有一个啊，我们后面还有一个。嗯，这个呢，是有一个放大缩小的效果。能看到吧，好行。啊，首先呢，大家需要去对view的动画呢，有一个基本的理解它其实呃，这个想起这个我就想起了那个农夫山泉的那个广告语。啊，那个那个叫我们不生产水，只是大自然水的什么搬运工啊，其实这就是用了那句话，其实view的动画，它其实就是操作的，是包装的什么呢？CSS transition和animation。它本身并不生产动画。

啊。这个view呢，会给我们呢，有个概念叫目标元素添加特定的一些plus，这个呢，等会我们就可以说啊，这里面一个图，到时候能说明一些问题啊，咱们再看来去打开文档。其实那个测试用例就从文档里面找出来。嗯。来有一个教程。好，这里面呢，有一个进入离开列表过渡啊这样一个动画。啊，一上来呢，它就有一个例子，其实就是我们那个例子能看懂不？其实安卓来大家学习怎么学，其实就看到了，把它的代码复制过去啊，先让他能够保证你复制过去以后能出来同样的效果，你再去看，哎，这里面有些什么东西，看看我能不能看懂，对吧？要不能看懂就要看一下它的一些说明，看完说明以后看看能不能看懂，那你自己学了肯定要消耗更长时间，但是啊，如果你自己看文档能学，其实这是最强的一个能力啊。

好。来打开这个。第一个是吧，好。来啊，我们来说一下这里怎么做的啊，首先我们还是需要去做一个事情，就是这里面大家看到这个界面啊，先看一下界面。把第一个打开，先把这个界面搞出来是吧？啊把这个界面搞出来。来一个div呗，来个div好了，这里面应该有一个ID是吧？啊，假设就叫test吧。好，嗯，最上面是一个button什么意思。切换它本来开关的意思啊，好，这里面带一个文本是吧，直接就是hello啊，它这个地方有一个有一个V。看到微干数或者微干if都行，能懂吧，好假设我就写个一字性啊，我们先做第一个啊，好这个地方应该有个什么。

At等于啊，其实非常简单，就写一字等于非一。是吧，好，那非常简单，来我们这里面直接六一个什么view是吧，写个页啊，写个井号test啊，需要写个对好这一次我们写个函数啊等下。能看到吧，好，接着写什么呢？那看到啊，写一个一字绣开始为数吧，就能显示了是吧。可以吧啊，可以可以显示隐藏，但是没有那种过渡效果是吧，没有过渡效果，那没有过渡效果呢，咱得去按照他说的是不是去加一些东西啊，来看一下加了些什么东西啊，首先他在这个P标签的外围加了一个标签，就叫什么全贼险，而且指定了一个name叫什么，对的，这个可以随便写，随便写都行，但是最好建面之意，Fate就逐渐消失的意思。

啊，那我们做的第一步，你尝尝做呗。穿J一些，因为每个人都有特定的语法，写一个name等于P的说我写个叉叉随便啊，啊，我写叉要写这个，主要说他可以随便写懂不懂啊，这是第一步啊好下面啊，这个里面没有什么东西跟我们刚才写的一样的，它下面写的一些这个。好，这个来说，看它这个名字都比较有规律啊，名字有规律啊，首先这一个类名的开头。就是我刚才指定的这个什么名字。

有没有看到，接着后面是一些特殊的名字。啊，特殊的名字，大家看它好，要想看懂它，必须看懂这个图。大家知道我们现在的效果有两个方面。一个叫。他是说的什么意思？进入还有一个leave，什么意思，这个什么叫进入，什么叫离开啊。进入是显示。离开，那不隐藏吗？我们实验室有两个动画，知道吧，一个是显示的动画，一个什么隐藏的动画吧？是这意思吧？大家可以去看一下，这里面我们显示这是隐藏吗？看到了吗？这是显示吗？是两个方面好。下面一个这个。好，这个里面呢，实际上是指定的这样一个类名啊类名OK。

这个进入有进入之前和进入之后吧，能懂吧，还有进入过程，这这个里面在说什么呢？他在说一个事情，一旦你一旦你啊给他加了一个传真性标签啊，给他指定一个name。包裹的是不是这个显示隐藏的目标元素P啊，它会在显示过程和显示开之前或者显示之后给我这个P加一些特定的什么呢，内里。嗯，这个加列宁嘛，是这么加，它是动态解答啊，譬如说它会开之前，假如我是进入它会开之前加一个这个。能懂吗？哎，那这时我们是不是要给他这个类名指定一些东西是吧，指定一些样式，包括啊，它会可能会会加这个，整个过程中它会加这个，那还一个。

呃，刚才我们有一个N的。看懂这意思吧，这一个相当于代表是我最先的时候，我是不是隐藏的状态。啊，此时它会加一个类名叫V杠，这个V是就是我的一个叉的叉。后面也是固定的，能不懂过程中，在这个动画的过程中，它会加这样一个类名。能理解吧，好这一个最后它会加这样一个类名，就是动画结束的时候会加一下这个类名。啊，下面这个你就应该知道。是什么意思呢？其实同样的道理啊，同样道理，这一个是我离开，准备离开之前，这个是离开的过程，这个代表什么？离开之后。这个代表离开咒好啦，接着来看啊。大家看到这里面过程是不是有两个，一个叫杠active，一个叫什么leave-active，你看他写的这个看啊。

这个。什么意思？这是不是给进入过程的类名，以及啊离开过程类名都加了一个什么。是不是穿真形样式，穿这形是不是用用来形容过渡效果。对不对，譬如说你过渡的时候改变哪个元素我们city啊，对吧，现在写的就我们city，但以后写的复杂可能不止它。下面一个持续什么，这个很重要，持续多长时间。这个能理解吧，啊，就是我这个动画到底会持续多长时间，那这么写着说明我进入和离开的效果是不一样的。持续的时间一样，变化的属性是不是也是一样？好，最后这个什么意思，这个是F-NFN的值能不能看见。

进度之前看得见吗。进入之前，我要进入之前看不看得见，看不见嘛，进入之前你怎么看得见呢？进入之前说明他是隐藏的状态吗。对吧，我们C的为一好了还一个。费个new to啊，我们看一下new to是哪个new to。离开之后，离开之后你看得见吗？看不见，那也就是说实际上它这一个两个类名描述的是不是都是隐藏时的命理。对吧，一个进入之前嘛，一个是离开之后嘛，这两个状态，我是不是需要去指定我隐藏的时候，我是一个什么样的样子状态呀。啊，现在我就写的，我们CT为零啊，我们后面肯定有别的效果啊，先写个简单的，大概应该懂了是吧？好，这个这些名称大家不用太记，你要知道是怎么一回事就行，我们看着这个来去写。

那也就是说我们写完这个穿这形标签以后，下一步我们是不是要定义一些样式去对吧？那有两个，第一个要定义我们动画过程的是不是传真线，那就这里面啊有两个类名一定要点好，首先我点的后面写什么呢？啊，因为我这个是这个名字吗。对吧，好接着干什么呢？来其实就是去写这两个，看这个。这个和这个。是吧，啊OK，把它写一下。啊杠active还一个点叉叉叉。啊杠什么act好，在这个列下面我们要写的什么transition。

对吧，我们现在只是变化谁city持续的时间，我为了能说明问题，让它更加明显一点，我给它搞成一秒可以吧？可以，好。下面我们要指定的是什么？隐藏时的样式对不对？隐藏有两个类名。一个是杠进度之前啊，再一个是点叉叉杠，Leave to。啊，我们只需要写什么，我T为零就OK了。是吧，啊，这个地方就要去知道指令啊显示。和什么呢，隐藏。

的过渡。效果是吧，好这一个下面这个指定什么啊，隐藏时的样式。能理解吧，啊好，来先看一下看看。我们的这个行不行啊。好像好像不对，是不是好像不对啊，来看一下看一下。少了一个什么啊，少了一个啊不对。是吧，来必须得保证它对啊，走。是可以啊，可以没问题，好来我们再做一个啊，这个太简单了，我们做的下一个这个。

这一个是什么呢？啊，这个是你看啊，它隐藏的时候，它不仅透明度变化，还有什么位移。能看到吧，向右移动消失是吧，而且进入和离开持续的时间不一样。假设一个是一秒，一个是三秒，这样搞得花的大一点，对，不懂，只进入是一秒，离开是三秒。我们看怎么做啊。来。这次我同时也跟大家演示，我其实可以去创建两个view的。大家看着我，我这里面有一个test啊，这里面假设说的是TEST1吧。我会搞两个大家看到啊，搞两个的话，我这个地方需要再去溜一个什么，是不是六一个实例可以六多个实例的能不能看到。那个相互之间不影响。能看到吧，啊是完全可以去做到的好。来这个地方，我来搞一个YY。

可以吧，啊或者你要取一个好点名字，你可以取个木是不是移动啊，取个名啊这意思好诶这个class不要，因为这不是我们，我们不需要加这个class是吧。好，我就写了个一字秀，我这里面是不是也有啊，都有了，那也就是说现在其实我也可以显示隐藏没问题，但没有一个过渡效果是吧，好。这个其实很好写了，看着这个上面啊，我们是叫木对吧，先是不是要指定过渡效果。但是我们现在的过滤效果是不是不太一样啊，一个持续时间一秒一个持续什么。三秒，那所以我是要分开写，分开写一个是写显示的，一个写什么隐藏的对不对，那显示的对应的是不是他呀。

是不是意思啊，只是我的这个名字叫什么木？是不是概念，那我一样要写哪个东西transition是吧？好了，现在我改变的属性还只有OB吗？不是，是不是还有transform。对吧，那有多个的时候可以写什么。等等吧，默写多个，直接搞一个握不就更好就可以了吗？如果就是你改变任何都可以，我下面再去指定改变哪些是吧，好，那接着持续的时间。啊，假设我显示是一秒啊，那我另外一个啊跟这个类似的，来看着啊，先是来这一个啊这个啊小个点来接着名字不对是吧，名字不对，我们这个有一个特别的名字叫什么木好了，来下面跟这个呢差不多，只是我的持续时间是什么。

三秒。对吧？好，下面写隐藏时的样式是一样的，隐藏式的样式不会变。啊，这个时候只需要改一下。木。能看到吧，好，我的为零，这是必然的。还有一个什么呢。川师。放。那我们是不是在水平方向上移动，那就是圈是内X，关键是我向哪边移动消失啊。是不是向右边。那你说我隐藏的位置是不是在右边，在右边的话是正值负值。正直，所以说我这我写个大一点的啊，让他能看得清楚点，比如说假设写个这个。

能不能看懂啊，OK，好，来，现在我们来看一下，看看我们这个有没有效果啊。看着吧。能不能看到啊，OK，消失的时间是更长啊，啊OK显示的时间是不是更短了。能看到吧。OK，一个一秒，一个三秒。嗯，这就是使用transition。去做这样一个事情。啊，其实这里面也有啊，这个地方实际上是也是用了它，这里面是有相应的例子。就是这种。能不能看到啊，其实是同一个好，现在我们。操作的是transition。还有一种动画效果叫animation。贴这个这个用的是什么呢？啊里面写，但这个用的少一些啊，我们就给大家简单的去演示一下，把它拿过来演示一下，而且它这个有一点小问题。

来啊，这里面我就简单的把它搞过来就得了啊，把这个拿过来，它这个会有一点小问题的，等会我跟大家说一下。首先这是它的模板，嗯，接着呢是它的JS，这个JS跟咱刚才是一样的。啊，跟他一样的好，当然他要写一点什么。是不是样式啊，样式写到这个什么style里面。好，我们简单来看一下啊，看一下先看一下它的效果。啊，这个呢太长了，我先把它搞短一点啊，这个里面搞短以后就就能发现它有一些问题。我尽量短一点，就那一点点。

嗯，就这么一好，来刷新一下，大家看啊。能看到吧，这有点这有点不太正常啊，OK，你没有那种感觉放大缩小的效果是吧？好，这里面呢，我为了能大家让大家看到更加明显的一个效果，我这里面还给大家去加一个背景颜色，让大家看一下，呃，Style background。等于red红色。大家看一下。其实有没有放大缩小的效果，有但是吧，这些问题是什么呢？问题是问题是这个哥们，你它是占了整行，占了整整个宽度，那整个宽度它一被撑大以后，就这这个文字就跑到跑到最里面去了。打开呀。看了吗？其实最好的方式是什么？如果你就这么宽一点，其实效果会更好一些。

如果这个宽度，如果这个宽度能小一点，会稍微好一点，其实最后我怎么做的，这么做的。就是这里面给他啊，给他加一个样式叫display in block。啊，这个换一行是吧，换一行我在里面加个B可不可以可以吧？嗯。大家来看。能看到吧，啊，这样肯定看起来舒服一点是吧？啊这是这就是这一个，那你你就这个此时就没有必要用红色了，你用红色，反正那个效果好像没那么明显一点，大家再来看。看到了吧，现在是不是感觉比家的背景颜色要好一点是吧，啊看。好。来看一下啊，这个里面的代码都没什么啊，就写了一个transition，写了个name啊，这个name其实也是可以随便写的啊，Name也可以随便写的，我刚才说过了，这个name就是决定了一些类名是吧。

好看它写成什么？这个写的是。我的什么？进入过程中的那个动画吧，这个指定什么，离开过程动画接着在里面写了个什么。Animation animation，诶用的是哪个animation呢？而且这个下面定义某一个具体的animation，定义的是它持续时间多长。0.5秒，哎，这个他怎么做的呢？看到有0%，50%，100%。对不还一个，看到这个skill01.5SKILL1。啥意思？这个可以看成是时间的一个一个位置有不一共是0.5秒吗。

能懂不啊，假设换成换成一秒吧，换成一秒熟一点啊，换成一秒。来画一秒啊，那也就是说，那也就是说在零秒的时候，在零秒的时候是不是我。我是没有对不对，因为我要显示嘛，它是没有的，K为零，那就看不见对不对，当我中间是0.5秒的时候。我会放大到什么1.5倍。对吧，当我是一秒的时候。干嘛？是不是显示为原始大小？那也就是说最终，哎，我这一点是刚才这个过程。开始是看不见的，你看它是不是先放大，再回到原来大小。能看到吧，好，离开怎么做的了？离开它也是用animation也是用的，这个只是写了一个东西，Re，什么意思干嘛？

反过来嘛，也就是说起始时间是这个。看得见吧，原始大小对不对，接着啊，逐渐变为什么。是1.5倍的大小。就放大嘛，是不是逐渐放大，放大以后接着干嘛。是不是缩小，缩小一直什么消失。你看。能看到吧，嗯，OK。就是这样一个过程，但是这种用的稍微少一些啊，用的挺少。大概有个了解就行，重点是这个全真型，因为我后面项目会用到这个全真型的动画啊。好，最后还是我们再总结一下我们写动画的。其实。就这么几步，首先写一个标签叫什么？传真型标签有一个类目属性，随便指是吧，这个标签得写在哪个外面。

是不是要显示隐藏那个元素啊，我们把它称为目标元素。懂不懂？好，接着需要去定义什么。是不是样式啊，定义样式呢有两种，有两个方面要定义，一个是要定义过度的样式，对不对，一个定义什么隐藏式的样式。OB或者是其他对吧，哎，其实啊，这个东西应该还是挺好写的，因为它相对来说啊挺固定的，大家需要的就是把这个给它记住，按照这个一步一步写就行。行，大家把这个给搞一搞，嗯。