Vue/vue
1
0
Fork 0
mirror of https://github.com/vuejs/vue.git synced 2024-11-21 20:28:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add move transitions to todomvc example

Browse Source
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">
<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

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

@ -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 = '';
},

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

@ -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));