root
/
vue2
mirror of https://github.com/vuejs/vue.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

add move transitions to todomvc example

This commit is contained in:
Evan You 2016-07-14 14:36:30 -04:00
parent 210a3a22b0
commit c1d8ccbe21
3 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
examples/todomvc/index.html
View File

@ -4,7 +4,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js • TodoMVC</title> <title>Vue.js • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> <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> </head>
<body> <body>
<section class="todoapp"> <section class="todoapp">
@ -18,13 +36,14 @@
</header> </header>
<section class="main" v-show="todos.length" v-cloak> <section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone"> <input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list"> <ul class="todo-list" is="transition-group" name="todo">
<li class="todo" <li v-for="todo in filteredTodos"
v-for="todo in filteredTodos" class="todo"
:class="{completed: todo.completed, editing: todo == editedTodo}"> :key="todo.id"
:class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed"> <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> <button class="destroy" @click="removeTodo(todo)"></button>
</div> </div>
<input class="edit" type="text" <input class="edit" type="text"
@ -41,9 +60,9 @@
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
</span> </span>
<ul class="filters"> <ul class="filters">
<li><a href="#/all" :class="{selected: visibility == 'all'}">All</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="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
<li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li> <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
</ul> </ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed Clear completed

6
examples/todomvc/js/app.js
View File

@ -78,7 +78,11 @@
if (!value) { if (!value) {
return; return;
} }
this.todos.push({ title: value, completed: false }); this.todos.push({
id: todoStorage.uid++,
title: value,
completed: false
});
this.newTodo = ''; this.newTodo = '';
}, },

9
examples/todomvc/js/store.js
View File

@ -4,11 +4,16 @@
'use strict'; 'use strict';
var STORAGE_KEY = 'todos-vuejs'; var STORAGE_KEY = 'todos-vuejs-2.0';
exports.todoStorage = { exports.todoStorage = {
fetch: function () { 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) { save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));