Vue2 - 23-03-30

回顾了一下$set

在视频案例里面，up主使用的方式修改了传过来的props，所以应该重点是为了提一下$set导致的疏忽吧

如果在this.$set(todo,'isEdited',true)中写成todo.isEdited=true，就没办法做到响应式，数据不会同步到App.vue

关于dom未更新不存在input不能触发focus的问题

可以使用this.$nextTick(function(){})让下一次更新（也就是说如果本次涉及修改数据的话就是紧接着这次），再去执行回调函数

动画及过度

【视频地址p91-p95】，因为这部分内容很容易忘，之前学习css的时候就练过，都还回去了…后面需要在进行补充吧

vue 动画的理解

• 1.操作 css 的 trasition 或 animation
• 2.vue 会给目标元素添加/移除特定的 class
• 3.过渡的相关类名：
  • 1.xxx-enter-active: 指定显示的 transition
  • 2.xxx-leave-active: 指定隐藏的 transition
  • 3.xxx-enter/xxx-leave-to: 指定隐藏时的样式

基本过渡动画的编码

• 1.在目标元素外包裹
• 2.定义 class 样式
  • a)指定过渡样式: transition
  • b)指定隐藏时的样式: opacity/其它

使用第三方动画库animate.css

animate.css官网已经给出了相对详细的使用方式了

贴出完整Test.vue

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏文字</button>
    <!-- 前两个使用的是默认名称 -->
    <transition>
        <h1 v-show="isShow" class="test">你好，这是{{name}}！！(一样)</h1>
    </transition>
    <transition>
        <h1 v-show="!isShow" class="test">你好，这是{{name.toUpperCase()}}！！(一样)</h1>
    </transition>
    <hr>
    <!-- 这是自定义名称动画效果 -->
    <transition name="test2">
        <h1 v-show="isShow" class="test2">你好，这是{{name}}！！（二）</h1>
    </transition>
    <!-- 使用过渡效果 -->
    <transition name="test3">
        <h1 v-show="!isShow" class="test3">你好，这是{{name.toUpperCase()}}！！（三）</h1>
    </transition>
    <hr>
    <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__backInRight"
        leave-active-class="animate__backOutRight"
    >
        <h1 v-show="isShow" class="test4">你好啊</h1>
    </transition>
    </div>
</template>

<script>
    import 'animate.css'
    export default {
        data(){
            return {
                name:'linzepore',
                isShow:true
            }
        }
    }
</script>

<style>
    .test {
        background-color: orange;
        color: black;
        width: 500px;
    }
    .v-enter-active {
        animation: testAni 0.5s;
    }
    .v-leave-active {
        animation: testAni reverse 0.5s
    }
    @keyframes testAni {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0%);
        }
    }

    .test2 {
        background-color: green;
        color: black;
        width: 500px;
    }
    .test2-enter-active {
        animation: testAni2 .5s;
    }
    .test-leave-active {
        animation: testAni2 reverse .5s;
    }
    @keyframes testAni2 {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0%);
        }
    }

    .test3 {
        background-color: blue;
        color: black;
        width: 500px;
        /* transition: 0.5s; 不破坏结构，可以写成动画：active */
    }
    .test3-enter {
        transform: translateX(-100%);
    }
    .test3-enter-to {
        transform: translateX(0%);
    }
    .test3-leave {
        transform: translateX(0%);
    }
    .test3-leave-to {
        transform: translateX(-100%);
    }
    .test3-enter-active, .test3-leave-active {
        transition: .5s;
    }
    .test4 {
        background-color: blueviolet;
    }
</style>

给todoList进行补充动画效果，只修改了List.vue

<template>
      <ul class="todo-main">
          <!-- 每一份都是独一无二的vc -->
      <transition-group name='todo' >
          <MyItem 
          appear
          v-for="todo in todos" 
          :key="todo.id"
          :todoItem="todo"
          />
      </transition-group>
      </ul>
</template>

<script>
    import MyItem from './MyItem.vue'
    export default {
        name:'MyList',
        components:{MyItem},
        props:['todos']
    }
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
  overflow: hidden;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

@keyframes todoAni {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

.todo-enter-active {
  animation: todoAni 0.5s;
}

.todo-leave-active {
  animation: todoAni reverse 0.5s;
}
</style>