master

分支 (1)

管理

管理

master

Example
/
vue-transition.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body {
			width:100%;
			height:100%;
			margin: 0px;
			padding:0px;
			display: table;
		}
		.container {
			display: table-cell;
			vertical-align: middle;
		}
		.bounce {
			width:500px;
			height:500px;
			margin: 0px auto;
			overflow: hidden;
			position: relative;
		}

		.bounce .content{
			width:500px;
			height:500px;

		}

		.bounce-transition {
			display: block;
			position: absolute;
			top:0px;
			right:0px;
			transition: all .3s ease;
			-webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-o-transition: all .3s ease;
			-ms-transition: all .3s ease;
		}

		.bounce-enter {
			right:-100%;
		}

		.bounce-leave {
			right:100%;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="bounce">
		<content v-bind:css="css"></content>
	</div>
</div>
</body>
<script type="text/javascript" src="semantic/js/jquery.min.js"></script>
<script type="text/javascript" src="semantic/js/vue.js"></script>
<script type="text/javascript">
	Vue.component('content',{
		props:['css'],
		data:function(){
			return {
				count:0			}
		},
		template:'<div class="content" transition="bounce" v-show="count == index" v-for="(index,item) in css" v-bind:style="{background:item}"></div>',
		ready:function(){
			var self = this;
			var timer = setInterval(function(){
				self.count ++;
				if(self.count == 3){
					self.count = 0;
				}
			},'3000');
		}
	})
	new Vue({
		el:'body',
		data:{
			css:[
				"#d1d2d4",
				"#ff8345",
				"#ff1244"
			]
		}
	});
</script>
</html>