Day12——nextTick和动画_animation nexttick-优快云博客

this.$nextTick

<input type="text"  ref="inputTitle">

 //编辑
        handleEdit(todo) {
            // 1-2在todos中增加一个isEdit属性，值为布尔值；当值为true，显示表单
            // 注意：将isEdit值设为true，需要满足响应式
            this.$set(todo,"isEdit",true)
            // 需要实现点击编辑时出现表单的同时自动获取焦点
            // 1.使用this.$refs.inputTitle.focus()不能达到目的，
            // 原因是：会把这两行代码执行完后解析模板，这样又会失去焦点。
            //2.使用定时器可以实现：
            // setTimeout(() => {
            //     this.$refs.inputTitle.focus()
            // });
            // 这种方法是利用了异步事件，原理是等执行完同步事件再去执行异步事件。
            // 3.使用API:$nextTick实现（比较推荐）
            this.$nextTick(function(){
                this.$refs.inputTitle.focus()
            })
            // 语法：this.$nextTick(回调函数)
            // 原理：当在它上边的代码执行完毕去解析完模板之后再回来执行this.$nextTick里的函数。
            // 场景：当已改变数据后，基于新的DOM进行某些操作时，在$nextTick回调函数中执行。
        },

实现一个元素过渡

动画效果

<template>
  <div class="demo">
    <button @click="isShow=!isShow">点击按钮显示或隐藏动画</button>
    <transition>    <!-- 在vue中一般将要做动画效果的部分用transition标签包起来-->
        <h2 v-show="isShow">{{msg}}</h2>
    </transition>
    <!-- <transition name="demo" appear>可以在标签内加入这些内容，若加了name，则需要给下边的进场和离场动画变为.demo-enter-active和.demo-leave-active，如果加appear，表示打开页面就有动画进场-->
  </div>
</template>

<script>
    export default {
        name:"SchoolInfo",
        data(){
            return {
                msg:"你好啊",
                isShow:true
            }
        }
    }
</script>

<style>
        /* 为h2增加动画效果 */
        @keyframes move{  /* move表示动画名字 */
            from{
                transform: translateX(-100%);
            }
            to{
                transform: translateX(0px);
            }
        }
        /* 为动画设置样式 */
        /* 进场动画 v-enter-active*/
        .v-enter-active{
                animation: move 0.5s linear forwards;  
                /* linear表示匀速 */
        }
        /* 离场动画 v-leave-active*/
        .v-leave-active{
                animation: move 0.5s linear reverse;
        }

            .demo h2{
                background-color: orange;
            }
            h2 {
                height: 100px;
                width: 100%;
                margin-top: 25px;
                text-align: center;
                line-height: 100px;
                font-size: 50px;
            }
</style>

用过渡实现

前边部分和动画实现一样，style标签里的内容有区别。

<style>
/* 用过渡同样实现效果 */
        /* 进入的起点、离开的终点 */
        .demo-enter,.demo-leave-to{
            transform:translateX(-100%);
        }
        /* 进入的终点、离开的起点 */
        .demo-enter-to,.demo-leave{
            transform:translateX(0);
        }
        /* 进入、离开界面过程中的效果样式 */
        .demo-enter-active,.demo-leave-active{
            transition: 0.5s linear;
        }
</style>

实现多个元素过渡

<button @click="isShow=!isShow">点击按钮显示或隐藏动画</button>
    <transition-group name="demo" appear>    <!-- 当要实现多个元素动画效果，必须加上group，且一定要加上key值-->
        <h2 v-show="isShow" key="1">{{msg}}</h2>
        <h1 v-show="isShow" key="2">hello</h1>
        <!-- 当然，也可以通过修改v-show的值来呈现出两个不同是显示的效果 -->
    </transition-group>

引入一个第三方库实现动画、过渡效果

Animate.css库

<div class="box">
    <button @click="isShow=!isShow">点击按钮显示或隐藏动画</button>
    <!-- 根据npm中animate.css教程，把name修改如下方所示： -->
    <!-- 并且配置两个新的配置项,然后在官网找到想要的效果复制-->
    <transition-group 
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__backInDown"
    leave-active-class="animate__backOutDown"
    >    
    <!-- 当要实现多个元素动画效果，必须加上group-->
        <h2 v-show="!isShow" key="1">{{msg}}</h2>
        <h1 v-show="isShow" key="2">hello</h1>
        <!-- 当然，也可以通过修改v-show的值来呈现出两个不同是显示的效果 -->
    </transition-group>
    <!-- <transition name="demo" appear>可以在标签内加入这些内容，若加了name，则需要给下边的进场和离场动画变为.demo-enter-active和.demo-leave-active，如果加appear，表示打开页面就有动画进场-->
  </div>