add move transitions to todomvc example

8 years ago · c1d8ccbe21
3 changed files with 40 additions and 12 deletions
--- a/examples/todomvc/index.html
+++ b/examples/todomvc/index.html
@ -4,7 +4,25 @@
 		<meta charset="utf-8">
 		<title>Vue.js • TodoMVC</title>
 		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
-		<style> [v-cloak] { display: none; } </style>
+		<style>
+		[v-cloak] {
+			display: none;
+		}
+		.todo-list {
+		  position: relative;
+		  overflow: hidden;
+		}
+		.todo {
+		  height: 60px;
+		}
+		.todo-move, .todo-enter-active, .todo-leave-active {
+		  transition: all .25s cubic-bezier(.55,0,.1,1);
+		}
+		.todo-enter, .todo-leave-active {
+		  opacity: 0;
+		  height: 0;
+		}
+		</style>
 	</head>
 	<body>
 		<section class="todoapp">
@ -18,13 +36,14 @@
 			</header>
 			<section class="main" v-show="todos.length" v-cloak>
 				<input class="toggle-all" type="checkbox" v-model="allDone">
-				<ul class="todo-list">
-					<li class="todo"
-						v-for="todo in filteredTodos"
-						:class="{completed: todo.completed, editing: todo == editedTodo}">
+				<ul class="todo-list" is="transition-group" name="todo">
+					<li v-for="todo in filteredTodos"
+						class="todo"
+						:key="todo.id"
+						:class="{ completed: todo.completed, editing: todo == editedTodo }">
 						<div class="view">
 							<input class="toggle" type="checkbox" v-model="todo.completed">
-							<label @dblclick="editTodo(todo)">{{todo.title}}</label>
+							<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
 							<button class="destroy" @click="removeTodo(todo)"></button>
 						</div>
 						<input class="edit" type="text"
@ -41,9 +60,9 @@
 					<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
 				</span>
 				<ul class="filters">
-					<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
-					<li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
-					<li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
+					<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
+					<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
+					<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
 				</ul>
 				<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
 					Clear completed
--- a/examples/todomvc/js/app.js
+++ b/examples/todomvc/js/app.js
@ -78,7 +78,11 @@
 				if (!value) {
 					return;
 				}
-				this.todos.push({ title: value, completed: false });
+				this.todos.push({
+					id: todoStorage.uid++,
+					title: value,
+					completed: false
+				});
 				this.newTodo = '';
 			},

--- a/examples/todomvc/js/store.js
+++ b/examples/todomvc/js/store.js
@ -4,11 +4,16 @@

 	'use strict';

-	var STORAGE_KEY = 'todos-vuejs';
+	var STORAGE_KEY = 'todos-vuejs-2.0';

 	exports.todoStorage = {
 		fetch: function () {
-			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+			var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+			todos.forEach(function (todo, index) {
+			  todo.id = index
+			});
+			exports.todoStorage.uid = todos.length;
+			return todos;
 		},
 		save: function (todos) {
 			localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));