vue内置的组件transition（形成动画）_vue transition动画

在官网中的详细描述：点击打开链接

transition组件出现过度/动画效果的原因

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

• 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
• 如果过渡组件提供了 JavaScript钩子函数，这些钩子函数将在恰当的时机被调用。
• 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作(插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

transition组件在什么情况下可以生成动画效果

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡动画效果

• 条件渲染 (使用 v-if) ，可以使用key代替v-if
• 条件展示 (使用 v-show)
• 动态组件

 <component v-bind:is="currentTabComponent"></component>
1

• 组件根节点
  transition/transition-group作为根组件，形成可复用动态组件

transition组件生成动画效果的方式

Vue 在插入、更新或者移除 DOM 时，提供了以下不同方式的应用过渡效果：

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

1.CSS 过渡

常用的过渡都是使用 CSS 过渡，也就是 组件和css3属性transition连用

 例子一：淡入淡出
 <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  
export default  {
    data() {
        return{
            show: true
        }
  } 
  
// 样式如此设置，只需要控制show是false还是true，即可有淡入淡出的效果

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在线调试

 案例二： 快速淡入 慢慢淡出
<transition name="slide-fade"> // 不设置name,默认为v-
    <p v-if="show">hello</p>
</transition>
  
export default  {
    data() {
        return{
            show: true
        }
  } 
  
 // 样式如此设置，只需要控制show是false还是true，
 // 即可有 快速淡入 慢慢淡出 的效果
 
 /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active { // 进入0.3秒
  transition: all .3s ease;
}
.slide-fade-leave-active { // 淡出0.8秒
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to // 进入开始是透明，淡出最后是透明
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.过渡可以和其他第三方 CSS 动画库连用

 案例一： Vue 的过渡系统可以和其他第三方 CSS 动画库，
 如 Animate.css 结合使用
 
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
</transition>
export default  {
    data() {
        return{
            show: true
        }
      }  
 //不需要设置样式，只需要控制show是false还是true，即可有动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.CSS 动画

• CSS 动画是transition组件和css3属性animation连用，用法和 CSS 过渡相同
• 区别是：在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

示例一：(省略了兼容性前缀)
  <transition name="bounce">
    <p v-if="show">使用animation做动画效果</p>
  </transition>
  export default  {
    data() {
        return{
            show: true
        }
      } 
      
// 样式如此设置，只需要控制show是false还是true，即可有动画的效果

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

4.还可以同时使用过渡和动画

用法同上，省略…

5.transition组件和JavaScript 钩子连用

• 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
• 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

例子一：进入离开动画
 <transition 
 @before-enter="beforeEnter" 
 @enter="enter" 
 @after-enter="afterEnter"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 >
    <div id="ball" v-show="show">hello</div>
</transition>

new Vue({
			el: '#app',
			data: {
				 show: true
				},
	methods: {
            // el 即操作的元素对象
        beforeEnter(el) {
                el.style.transform='translate(80px,80px)';
            },
        enter(el,done){
                //必须加下面一行，否则不会出现应有的效果
                el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight
                el.style.transition='all 1.5s ease';
                el.style.transform='translate(0,0)';
                done()
            },
        afterEnter(el){
                console.log('afterEnter');
                // this.flag=false;//隐藏小球
            },
        beforeLeave: function (el) {
                el.style.transform='translate(0,0)';
             },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        leave: function (el, done) {
            el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight
            el.style.transition='all 3s ease';
            el.style.transform='translate(80px,80px)';
           // 这里直接调用done的话由于会立即删除元素导致动画不执行
          // done();
		  //方法1：
          // 不调用done可以进行动画，但是元素依旧存在，并且afterLeave函数钩子不执行
		  //方法2：
          // setTimeout可以解决这个问题，让done不立即执行，过几秒后再执行
          setTimeout(done,3000); //时间根据自己设定的动画时间确定
           
        },
        afterLeave: function (el) {
            console.log('afterLeave');
        
        },
  }
			})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

注意：

• 在leave函数钩子中 ，直接调用done函数，会立即删除元素导致动画不执行
• 在线调试

例子二：和JavaScript 动画库Velocity一起使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
</transition>

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

6.组件间切换的动态效果实现

组件的过渡 - 不需要使用 key attribute。使用动态组件，进行动态切换：

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})


.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在线调试

7.元素间切换的动态效果实现

• 7.1原生标签可以使用 v-if/v-else
• 在线调试案例

例子1:
<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>


例子2:为相同元素绑定key，否则不会有动画效果
<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：当有相同标签名的元素切换时(比如两个div元素)，必须通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容（也就是不会有动画效果）。

• 7.2设置key代替v-if/v-else
  在线调试案例

// 设置key代替v-if/v-else

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

1
2
3
4
5
6
7
8

• 7.3两种过渡模式
  多个元素间的过度动画（一个元素离开，一个元素进入），是同时生效的。这种情形不能满足所有要求，所以 Vue 提供了过渡模式。
  in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  out-in：当前元素先进行过渡，完成之后新元素过渡进入

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>
1
2
3

8.可复用过渡组件

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 或者 作为根组件，然后将任何子组件放置在其中就可以了。

在线调试案例
使用 template 的简单例子：

Vue.component('my-special-transition', {
  template: '\
    <transition\
      name="very-special-transition"\
      mode="out-in"\
      v-on:before-enter="beforeEnter"\
      v-on:after-enter="afterEnter"\
    >\
      <slot></slot>\
    </transition>\
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

函数式组件更适合完成这个任务：

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20