VUE transition-group 多列动画

多列动画使用的场景为父元素下有多个子元素的动画过渡场景，比如使用 `v-for` 在这种场景中，使用 `<transition-group> `组件。在深入例子之前，先了解关于这个组件的几个特点：
不同于` <transition>`，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 `tag 特性`更换为其他元素。
`注`

过渡模式不可用，因为不再相互切换特有的元素。
	内部元素 总是需要 提供唯一的 key 属性值。

####列表的进入/离开过渡

现在由简单的例子深入，进入和离开的过渡使用之前一样的 CSS 类名。

```html
<div id="list-demo" class="demo">
	<button v-on:click="add">Add</button>
	<button v-on:click="remove">Remove</button>
	<transition-group name="list" tag="p">
		<span v-for="item in items" v-bind:key="item" class="list-item">
			{{ item }}
		</span>
	</transition-group>
</div>
```

```javascript
new Vue({
	el: '#list-demo',
	data: {
		items: [1,2,3,4,5,6,7,8,9],
		nextNum: 10
	},
	methods: {
		randomIndex: function () {
			return Math.floor(Math.random() * this.items.length)
		},
		add: function () {
			this.items.splice(this.randomIndex(), 0, this.nextNum++)
		},
		remove: function () {
			this.items.splice(this.randomIndex(), 1)
		},
	}
})
```

```css
.list-item {
	display: inline-block;
	margin-right: 10px;
}
.list-enter-active, .list-leave-active {
	transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
	opacity: 0;
	transform: translateY(30px);
}
```

这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，下面会解决这个问题。

####列表的排序过渡

`<transition-group>` 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 `v-move` 特性，它会在元素的改变定位的过程中应用。[像之前的类名一样](http://jikemaimai.com/article/detail?a_id=4 "像之前的类名一样")，可以通过 name 属性来自定义前缀，也可以通过 `move-class` 属性手动设置。

`v-move` 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
	<button v-on:click="shuffle">Shuffle</button>
	<transition-group name="flip-list" tag="ul">
		<li v-for="item in items" v-bind:key="item">
			{{ item }}
		</li>
	</transition-group>
</div>
```

```javascript
new Vue({
	el: '#flip-list-demo',
	data: {
		items: [1,2,3,4,5,6,7,8,9]
	},
	methods: {
		shuffle: function () {
			this.items = _.shuffle(this.items)
		}
	}
})
```

```css
.flip-list-move {
	transition: transform 1s;
}
```

内部的实现，Vue 使用了一个叫 `FLIP` 简单的动画队列使用 `transforms` 将元素从之前的位置平滑过渡新的位置。
将之前实现的例子和这个技术结合，使列表的一切变动都会有动画过渡。
```html

<div id="list-complete-demo" class="demo">
	<button v-on:click="shuffle">Shuffle</button>
	<button v-on:click="add">Add</button>
	<button v-on:click="remove">Remove</button>
	<transition-group name="list-complete" tag="p">
		<span
			  v-for="item in items"
			  v-bind:key="item"
			  class="list-complete-item"
			  >
			{{ item }}
		</span>
	</transition-group>
</div>
```

```javascript
new Vue({
	el: '#list-complete-demo',
	data: {
		items: [1,2,3,4,5,6,7,8,9],
		nextNum: 10
	},
	methods: {
		randomIndex: function () {
			return Math.floor(Math.random() * this.items.length)
		},
		add: function () {
			this.items.splice(this.randomIndex(), 0, this.nextNum++)
		},
		remove: function () {
			this.items.splice(this.randomIndex(), 1)
		},
		shuffle: function () {
			this.items = _.shuffle(this.items)
		}
	}
})
```
```css
.list-complete-item {
	transition: all 1s;
	display: inline-block;
	margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
	/* .list-complete-leave-active for below version 2.1.8 */ {
	opacity: 0;
	transform: translateY(30px);
}
.list-complete-leave-active {
	position: absolute;
}
```

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡：

####列表的交错过渡

通过 data 属性与 JavaScript 通信 ，就可以实现列表的交错过渡：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="staggered-list-demo">
	<input v-model="query">
	<transition-group
		name="staggered-fade"
		tag="ul"
		v-bind:css="false"
		v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:leave="leave"
			>
		<li
		v-for="(item, index) in computedList"
		v-bind:key="item.msg"
		v-bind:data-index="index"
	>{{ item.msg }}</li>
	</transition-group>
</div>
```

```javascript
new Vue({
	el: '#staggered-list-demo',
	data: {
		query: '',
		list: [
			{ msg: 'Bruce Lee' },
			{ msg: 'Jackie Chan' },
			{ msg: 'Chuck Norris' },
			{ msg: 'Jet Li' },
			{ msg: 'Kung Fury' }
		]
	},
	computed: {
		computedList: function () {
			var vm = this
			return this.list.filter(function (item) {
				return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
			})
		}
	},
	methods: {
		beforeEnter: function (el) {
			el.style.opacity = 0
			el.style.height = 0
		},
		enter: function (el, done) {
			var delay = el.dataset.index * 150
			setTimeout(function () {
				Velocity(
					el,
					{ opacity: 1, height: '1.6em' },
					{ complete: done }
				)
			}, delay)
		},
		leave: function (el, done) {
			var delay = el.dataset.index * 150
			setTimeout(function () {
				Velocity(
					el,
					{ opacity: 0, height: 0 },
					{ complete: done }
				)
			}, delay)
		}
	}
})
```

###可复用的过渡

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

使用 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) {
                  // ...
                }
              }
            })

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

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)
	  }
	})

###动态过渡

在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。

所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="dynamic-fade-demo" class="demo">
	Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
	Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
	<transition
				v-bind:css="false"
				v-on:before-enter="beforeEnter"
				v-on:enter="enter"
				v-on:leave="leave"
				>
		<p v-if="show">hello</p>
	</transition>
	<button
			v-if="stop"
			v-on:click="stop = false; show = false"
			>Start animating</button>
	<button
			v-else
			v-on:click="stop = true"
			>Stop it!</button>
</div>
```

```javascript
new Vue({
	el: '#dynamic-fade-demo',
	data: {
		show: true,
		fadeInDuration: 1000,
		fadeOutDuration: 1000,
		maxFadeDuration: 1500,
		stop: true
	},
	mounted: function () {
		this.show = false
	},
	methods: {
		beforeEnter: function (el) {
			el.style.opacity = 0
		},
		enter: function (el, done) {
			var vm = this
			Velocity(el,
					 { opacity: 1 },
					 {
				duration: this.fadeInDuration,
				complete: function () {
					done()
					if (!vm.stop) vm.show = false
						}
			}
					)
		},
		leave: function (el, done) {
			var vm = this
			Velocity(el,
					 { opacity: 0 },
					 {
				duration: this.fadeOutDuration,
				complete: function () {
					done()
					vm.show = true
				}
			}
					)
		}
	}
})
```