27 May, 2018

টিউটোরিয়াল

rimonmath

2453 views


Vue JS 2 বাংলা টিউটোরিয়াল #14: Transition Animation এর সোর্স কোড : 

 

 

 

 

index.html:

 

<!DOCTYPE html>
<html>
<head>
	<title>Vue Js Bangla Tutorial</title>	
	<style type="text/css">
		.foo{
			min-height: 222px;
			width: 960px;
			margin: 44px auto;
			text-align: center;
			background: #DBF2B5;
		}

		.bar-enter-active, .bar-leave-active {
		  transition: margin-left .5s
		}
		.bar-enter, .bar-leave-to  {
		  margin-left: -222px;
		}


	</style>
</head>
<body>

<div id="root">	
	<button @click="show = !show">Toggle</button>

	<transition name="bar">	
		<div class="foo" v-show="show"> Hello World </div>
	</transition>

	<h1>Skills</h1> <hr>
	<input type="text" placeholder="Enter skill" v-model="newSkill">
	<button v-on:click="addSkill()"> Add </button>
	<br><br><br>
	<ul>
		<transition-group name="bar">	
			<li v-for="(skill, i) in skills" :key="i">
				<p>{{skill}} <button @click="removeSkill(i)">x</button></p>
			</li>
		</transition-group>	
	</ul>

	
</div>

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

	var app = new Vue({
		el: "#root",
		data: {
			show: false,
			newSkill: "",
			skills: ["HTML", "CSS", "JS"] 
		},

		methods:{
			addSkill: function(){
				this.skills.push(this.newSkill);
				this.newSkill = "";
			},

			removeSkill: function(i){
				this.skills.splice(i, 1);
			}
		}
	});
	
</script>

</body>
</html>