VUE学习-元素过渡

单元素过渡

appear 初始渲染

通过 appear attribute 设置节点在初始渲染的过渡

appear + css

<transition appear appear-class="custom-appear-class"appear-to-class="custom-appear-to-class" (2.1.8+)appear-active-class="custom-appear-active-class" >

	<!-- ... -->

</transition>

appear + js钩子

<transition appear v-on:before-appear="customBeforeAppearHook"v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook"v-on:appear-cancelled="customAppearCancelledHook" >

	<!-- ... -->

</transition>

过渡

v-if 或者 v-show 条件显示或者动态组件下可以添加进入/离开过渡

<div id="demo">

	<button v-on:click="show = !show">Toggle</button>

	<transition name="fade">

		<p v-if="show">hello</p>

	</transition>

</div>

<script>

new Vue({

	el: '#demo',

	data: {show: true }

})

</script>

<style>

/* 定义进入 /离开的过渡动作 */

.fade-enter-active, .fade-leave-active {transition: opacity .5s;}

/* .fade-leave-active below version 2.1.8 */

.fade-enter, .fade-leave-to {opacity: 0;}

</style>

动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<div id="demo">

	<button v-on:click="show = !show">Toggle</button>

	<transition name="bounce">

		<p v-if="show">hello</p>

	</transition>

</div>

<script>

new Vue({

	el: '#demo',

	data: {show: true }

})

</script>

<style>

/* 定义进入 / 离开的动画 */

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

}

</style>

在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

多元素过渡

多个原生标签可以使用 v-if/v-else：

最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition>

	<table v-if="items.length > 0">

		<!-- ... -->

	</table>

	<p v-else>Sorry, no items found.</p>

</transition>

相同标签名的元素切换时，需要通过 key attribute 设置唯一的值

<transition>

	<button v-if="isEditing" key="save">Save</button>

	<button v-else key="edit">Edit</button>

</transition>

<!-- 也可以通过给同一个元素的 key attribute 设置不同的状态 -->

<transition>

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

多个组件的过渡可以使用动态组件：

<div id="comp">

	<radio v-model="view" value="v-a">A</radio>

	<radio v-model="view" value="v-b">B</radio>

	<transition name="component-fade" mode="out-in">

		<component v-bind:is="view"></component>

	</transition>

</div>

<script>

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>'

		}

	}

})

</script>

<style>

.comp-fade-enter-active, .comp-fade-leave-active {transition: opacity .3s ease;}

.comp-fade-enter, .comp-fade-leave-to {opacity: 0;}/* .component-fade-leave-active for below version 2.1.8 */

</style>

列表过渡

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

<script>

new Vue({

	el: '#list-demo',

	data: {

		items: [1,2,3,4,5,6,7,8,9],

		next: 10

	},

	computed:{

		rIndex: function () {

			return Math.floor(Math.random() * this.items.length)

		},

	},

	methods: {

		add: function () {

			this.items.splice(this.rIndex, 0, this.next++)

		},

		remove: function () {

			this.items.splice(this.rIndex, 1)

		},

	}

})

</script>

<style>

.list-item {

	display: inline-block;

	margin-right: 10px;

	display: inline-block;

}

.list-enter-active, .list-leave-active {

	transition: all 1s;

}

.list-enter, .list-leave-to {

	opacity: 0;

	transform: translateY(30px);

}

/* .list-leave-active for below version 2.1.8 */

.list-move {

	transition: transform 1s;

}

</style>

多维表格重排

https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions?file=/index.html:0-1157

<!DOCTYPE html>

<html>

<head>

	<title>List Move Transitions Sudoku Example</title>

	<script src="https://unpkg.com/vue@2"></script>

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

	<link rel="stylesheet" type="text/css" href="/style.css" />

</head>

<body>

	<div id="sudoku-demo" class="demo">

		<h1>Lazy Sudoku</h1>

		<p>Keep hitting the shuffle button until you win.</p>

		<button @click="shuffle">Shuffle</button>

		<transition-group name="cell" tag="div" class="container">

			<div v-for="cell in cells" :key="cell.id" class="cell">{{ cell.number }}</div>

		</transition-group>

	</div>

	<script>

	new Vue({

		el: "#sudoku-demo",

		data: {

			cells: Array.apply(null, { length: 81 }).map(function(_, index) {

				return {

					id: index,

					number: (index % 9) + 1

				};

			})

		},

		methods: {

			shuffle: function() {

				//创建一个被打乱值的集合

				this.cells = _.shuffle(this.cells);

			}

		}

	});

	</script>

</body>

</html>

巴特西

VUE学习-元素过渡

单元素过渡

appear 初始渲染

过渡

动画

多元素过渡

多维表格重排

最新文章

热门文章