Vue2.0 Transition常见用法全解惑

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue2.0的过渡系统（transition）有了很大的改变，想把1.0的项目迁移到2.0，着实需要费一些功夫，今天我就要把vue2.0的过渡系统的用法搞清楚，因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现，vue2.0的文档中还讲到了初始渲染的过渡、多个元素的过渡、多个组件的过渡和列表过渡，他们的过渡效果实现方式和单元素/组件的类似，我感觉实际项目中用的不太多吧，有兴趣的同学可以去了解一下，文档这里说的多个元素和多个组件和我们的理解可能不太一样，一定要仔细阅读文档，搞清楚到底说的是什么样的情况。

Vue只有在插入，更新或者移除DOM元素时才会应用过渡效果，过渡效果的应用可以通过不同方式实现，官方文档中提到了如下几种：

  1. 在CSS过渡和动画中自动应用class；

  2. 配合使用第三方的CSS动画库，如Animate.css；

  3. 在过渡钩子函数中使用JavaScript直接操作DOM；

  4. 配合使用第三方JavaScript动画库，如Velocity；

上面四种方式其实主要就是两种，一个是利用CSS过渡或者动画，另一个是利用JavaScript钩子函数。

怎么应用过渡到元素/组件上

要想使元素或者组件应用到我们所写的过渡动画，需要使用vue提供的transition来封装组件成为过渡组件，transition需要与如下情景中的任一种一起使用：

  • v-if（条件渲染）

  • v-show（条件展示）

  • 动态组件

  • 在组建的根节点上，并且被vue实例DOM方法触发，如appendTo方法把组件添加到某个根节点上

当需要插入或者删除封装成过渡元素的元素时，vue将做如下事情：

  1. 查找目标元素是否有CSS过渡或者动画，如果有就在适当的时候进行处理；

  2. 如果过渡组件设置了JavaScript钩子函数，vue会在相应阶段调用钩子函数；

  3. 如果以上两者都没有，DOM操作（插入或者删除）就在下一帧立即执行。

CSS过渡

先举一个典型的CSS过渡的例子：

1 <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name，然后添加触发这个元素过渡的按钮（实际项目中不一定是按钮，任何能触发过渡组件的DOM操作的操作都可以） -->
2 <div>
3   <button @click="show=!show">show</button>
4   <transition name="fade">
5     <p v-show="show">hello</p>
6   </transition>
7 </div>

1 // 接着为过渡类名添加规则
2 &.fade-enter-active, &.fade-leave-active
3   transition: all 0.5s ease     
4 &.fade-enter, &.fade-leave-active
5   opacity: 0

封装上面的代码，就可以实现一个简单的动画了，CSS的transition属性是用来设置过渡总体效果的，具体可参考：http://www.w3cplus.com/content/css3-transition。

CSS过渡类名

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name="fade"，会有如下四个CSS类名：

  1. fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；

  2. fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；

  3. fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

  4. fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。 
上面示例中，fade-enter和fade-leave-active类设置CSS为opacity:0，说明过渡刚进入和离开的时候透明度为0，即不显示。当然还可以设置其他的CSS属性，transform属性是除了opacity之外经常在这里被用到的，transform用法可参考http://www.w3cplus.com/content/css3-transition

CSS动画

组件过渡的实现不仅可以通过CSS过渡还可以通过CSS动画(animation)实现，建议先了解一下CSS3 Animation，这里还是给个例子：

1 <div>
2   <button @click="show=!show">show</button>
3   <transition name="fold">
4     <p v-show="show">hello</p>
5   </transition>
6 </div>

 1 .fold-enter-active {
 2   animation-name: fold-in;
 3   animation-duration: .5s;
 4 }
 5 .fold-leave-active {
 6   animation-name: fold-out;
 7   animation-duration: .5s;
 8 }
 9 @keyframes fold-in {
10   0% {
11     transform: translate3d(0, 100%, 0);
12   }
13   50% {
14     transform: translate3d(0, 50%, 0);
15   }
16   100% {
17     transform: translate3d(0, 0, 0);
18   }
19 }
20 @keyframes fold-out {
21   0% {
22     transform: translate3d(0, 0, 0);
23   }
24   50% {
25     transform: translate3d(0, 50%, 0);
26   }
27   100% {
28     transform: translate3d(0, 100%, 0);
29   }
30 }

如果预先了解了CSS动画（上面给了链接），上面代码还是很好理解的，要注意的是CSS动画中，fold-enter类名在节点插入DOM后不会立即删除，而是在animationed事件触发时删除。

自定义过渡类名

上面的四个过渡类名都是根据transition的name属性自动生成的，那么能否自己定义这四个类名呢？答案是可以的，通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。

 1 <div>
 2   <button @click="show=!show">show</button>
 3   <transition 
 4     name="fade"
 5     enter-class="fade-in-enter"
 6     enter-active-class="fade-in-active"
 7     leave-class="fade-out-enter"
 8     leave-active-class="fade-out-active"
 9   >
10     <p v-show="show">hello</p>
11   </transition>
12 </div>

1 &.fade-in-active, &.fade-out-active
2   transition: all 0.5s ease     
3 &.fade-in-enter, &.fade-out-active
4   opacity: 0

上面代码中，原来默认的fade-enter类对应fade-in-enter，fade-enter-active类对应fade-in-active，依次类推。

JavaScript钩子函数

除了用CSS过渡的动画来实现vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子：

 1 <transition
 2   v-on:before-enter="beforeEnter"
 3   v-on:enter="enter"
 4   v-on:after-enter="afterEnter"
 5   v-on:enter-cancelled="enterCancelled"
 6   v-on:before-leave="beforeLeave"
 7   v-on:leave="leave"
 8   v-on:after-leave="afterLeave"
 9   v-on:leave-cancelled="leaveCancelled"
10 >
11 </transition>

 1 methods: {
 2   // 过渡进入
 3   // 设置过渡进入之前的组件状态
 4   beforeEnter: function (el) {
 5     // ...
 6   },
 7   // 设置过渡进入完成时的组件状态
 8   enter: function (el, done) {
 9     // ...
10     done()
11   },
12   // 设置过渡进入完成之后的组件状态
13   afterEnter: function (el) {
14     // ...
15   },
16   enterCancelled: function (el) {
17     // ...
18   },
19   // 过渡离开
20   // 设置过渡离开之前的组件状态
21   beforeLeave: function (el) {
22     // ...
23   },
24   // 设置过渡离开完成时地组件状态
25   leave: function (el, done) {
26     // ...
27     done()
28   },
29   // 设置过渡离开完成之后的组件状态
30   afterLeave: function (el) {
31     // ...
32   },
33   // leaveCancelled 只用于 v-show 中
34   leaveCancelled: function (el) {
35     // ...
36   }
37 }

上面的钩子函数中可以进行任何你想做的DOM操作。 
小技巧：如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

目前接触到的关于vue transition相关的就这么多了，当然vue transition的用法可不止这么点，这需要我以后的慢慢积累。

以上是 Vue2.0 Transition常见用法全解惑 的全部内容， 来源链接： utcz.com/z/378668.html

回到顶部