53TodoList 案例__使用动画效果过渡

TodoList 案例__使用动画效果过渡

第一种方法：直接加在Todo上

<transition></transition>

MyItem

<template>
    <transition name="todo" appear>
        <li>
            <label>
                <input type="checkbox" :checked="todo.done" @change="updateDone(todo.tid)"/>
                <span v-show="!todo.isEdit">{{todo.title}}</span>
                <input ref="focusInput" v-show="todo.isEdit" type="text" :value="todo.title" @blur="handlerbulr(todo, $event)" />    
            </label>
            <button class="btn btn-danger" @click="removeTodo(todo.tid)">删除</button>
            <button class="btn btn-edit" @click="editTodo(todo)">编辑</button>
        </li>
    </transition>
</template>

<style scoped>
    
    /* todo 进入与移除的动态 */
    .todo-enter, .todo-leave-to {
        transform: translateX(100%);
    }

    .todo-enter-active, .todo-leave-active {
        transition: 0.5s;
    }

    .todo-enter-to, .todo-leave {
        transform: translateX(0);
    }

</style>

第二种方法：加在TodoList上

<transition-group></transition-group>

MyList

<template>
    <ul class="todo-main">
        <transition-group name="todo" appear>
            <MyItem 
                v-for="todo in todos" 
                :key="todo.tid" 
                :todo="todo" 
                :checkTodo="checkTodo"
                :deleteTodo="deleteTodo"
            />
        </transition-group>
    </ul>
</template>

<style scoped>
    /* todo 进入与移除的动态 */
    .todo-enter, .todo-leave-to {
        transform: translateX(100%);
    }
    .todo-enter-active, .todo-leave-active {
        /* property name | duration | timing function | delay */
        transition: 0.5s linear 0.5s;
    }
    .todo-enter-to, .todo-leave {
        transform: translateX(0);
    }
</style>