VUE项目-饿了吗(ele)-项目总结之简单动画(transition)

transition在vue的升级中,改变非常大,在以前还是个属性的它成长为了类似标签包裹的形式(个人觉得类似一个组件),具体变化可以参考官方文档

网址:https://cn.vuejs.org/v2/guide/migration.html

老规矩还是先贴代码:

旧html代码:

<div v-show="detailShow" class="detail" transition="fade"> </div>

新html代码:

<transition name="fade">

<div v-show="detailShow" class="detail"> </div>

</transition>

旧css代码:

.detail

    position: fixed

    z-index: 100

    top: 0

     left: 0

     width: 100%

      height: 100%

      overflow: auto

      transition: all 0.5s

      backdrop-filter: blur(10px)

      &.fade-transition

              opacity: 1

              background: rgba(7, 17, 27, 0.8)

       &.fade-enter, &.fade-leave

             opacity: 0

             background: rgba(7, 17, 27, 0)

新css代码:

.detail

   position: fixed

   z-index: 100

   top: 0

   left: 0

   width: 100%

   height: 100%

   overflow: auto

   backdrop-filter: blur(10px)

   opacity: 1

   background: rgba(7, 17, 27, 0.8)

   &.fade-enter-active, &.fade-leave-active

          transition: all 0.5s

   &.fade-enter, &.fade-leave-active

          opacity: 0

          background: rgba(7, 17, 27, 0)

改css代码:

因为transition从属性变为了类似标签包裹的形式,所以认为直接可以和detail平级

.fade-enter-active, .fade-leave-active {

       transition: opacity 0.7s;

}

.fade-enter, .fade-leave-active {

       //注:这里可以换为.fade-enter, .fade-leave-to

          opacity: 0;

}

 

---

官方文档中说明:

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。(记忆:初始状态,也就是没有进入动画前的效果,如果你不想看到它就在这里隐藏,如果你希望它从左边飞入,就先让它在左边等着,-----元素最初的状态)(理解:你要从A到B,A----------------B中的A)。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数(记忆:这里可以添加时间,延迟和曲线等,所以这里加transition属性,-----动画进入过程时的效果)(理解:你要从A到B,A----------------B中间走的过程)。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

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

 

 

官方文档中的信息就是这样的,看上去还是很懵,所以一般直接记住两对就好了

.fade-enter-active, .fade-leave-active

.fade-enter, .fade-leave-active

这样方便记忆是可以的,但是要自己真正学会去写一个简单的动画,还是需要简单的理解一下

也不知道自己的理解是否正确,如有错误还望各位多多指点

 

拓展:

做一个小的拓展,在这个项目中,讲师给很多东西都做了动画,但是没有给界面切换加入动画.所以我就简单的说一声,给切换界面加动画,只需要用transition包裹住router-view就可以了,但是在后面加上购物车组件后会有点小问题,后续我看看能不能让其完美,代码如下

---

html代码:

css代码:

此处将v-enter和v-leave-to分开是为了是界面始终从同一个方向切入