vue教程系列第四十一节-transition的过渡应用

我们为什么要使用这个封装组件

是vue封装的过渡组件。我们在浏览我们之前做的切换页面效果时，发现很生硬，让人很不舒服。我们浏览一些大型公司的网站尤其是一些很知名的手机端的站点时，会发现他们的切换是非常柔和的，让人非常舒服。这就是客户体验的不同，给人的感受不一样。所以我们就需要引入今天的主觉transition，让我们在与电脑或者白禾木山进行交互的时候，变得柔和地过渡。

步骤：

第一步：用包裹目标元素

要实现柔和地过渡，我们首先要在想要其实现过渡效果的容器外面套一层，以示标示这个容器是有一个过渡效果的。

这时候依然是没有过渡效果的，因为我们还没有给其进行任何地设置。

“进入” “离开”状态的类的介绍：

这些设置就是为transition定义一系列的类。这些类被定义之后呢，vue会嗅探出目标元素是否应用了css样式，如果应用了呢，就会在恰当的时机添加或者删除这些类名。这些类主要分为两大类，一类是“进入”状态的类，另一类则是“离开”状态的类。

• “进入”状态的类又分为”enter”， ”enter-active”， ”enter-to”;
• “离开”状态的类又分为”leave”， ” leave -active”， ” leave -to”

屏幕快照 2018-10-26 上午8.32.33.png

小伙伴们看到这些类之后，可能头都大了，实则理解起来并不难。

• ”enter-active”：在整个“进入”状态里一直存在，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• ”enter”：“进入”的开始状态
• ”enter-to”： “进入”的结束状态

理解”enter”和”enter-to”很简单，我们可以拿百米赛跑打个比方。我们在起跑的准备阶段即为”enter”的状态；当到达100米这个目标点时，即为“进入”的结束状态；”enter-active”存在于开始状态到结束状态的整个过程。

离开状态和进入状态相似，在此不再赘述。

一般情况下,”enter”和”leave-to”的状态是一样的，”leave”和“enter-to”的状态是一样的。

我们也不用所有的类都定义，我们只要记住定义其中四个类就可以，分别是以下几个：”enter-active”，” leave -active”， ”enter”， ” leave -to”

类的前缀介绍：

当我们没有给transition设置name属性时，以上介绍的类的前缀是v，例如enter的类名为：v-enter。当我们给transition设置name属性时，其前缀是name值，例如我们设置name=”fade”,那么enter的类名为：fade-enter。

第二步：给transition定义类

1. 设置name值

2. 为其定义类

.fade-enter-active, .fade-leave-active {
 transition: opacity .4s
}
.fade-enter,.fade-leave-to {
 opacity: 0
}

这时候我们就可以在浏览器里看到过渡的效果了。我们会发现目标元素上会有类的添加和删除，速度很快，就是一瞬间的事儿，这些类就是我们定义的类。

第三步：mode的使用

我们看到这个过渡跟我们的预期有些不一样，切换的时候会有位置的移动。造成这种现象的原因是后一页的进入和前一页的离开同时进行造成的。这是我们不想看到的，我们想让前一页先离开，后一页再进入，这样就不会有位置的移动了。Transition里还有一个mode属性，将其设置成mode=”out-in”，就可以解决这个问题。当然。Mode还有另一个值是”in-out”，先进后出，大家可以测试一下这两个值的区别噢！

可能我的视频是会罗嗦一些，只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，只要我会的，我都会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！