GitHub
/
Vue.js
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add move transitions to todomvc example

dev
Evan You 8 years ago
parent
210a3a22b0
commit
c1d8ccbe21
3 changed files with 40 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      examples/todomvc/index.html
  2. 6
      examples/todomvc/js/app.js
  3. 9
      examples/todomvc/js/store.js

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

Write Preview
Loading…
Cancel
Save