vue——$nextTick、动画、过渡

$nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次DOM节点更新结束后执行其指定的回调函数
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在$nextTick所指定的回调函数中执行

Vue封装的动画和过渡

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2.写法：

​ 2.1准备好样式：

​ 元素进入的样式：

​ 2.1.1 v-enter：进入的起点

​ 2.1.2 v-enter-active：进入过程中（动画一般用这个样式就可以了）

​ 2.1.3 v-enter-o：进入的终点

​ 元素离开的样式：

​ 2.2.1 v-leave：离开的起点

​ 2.2.2 v-leave-active：离开过程中（动画一般用这个样式就可以了）

​ 2.2.3 v-leave-to：要离开的终点

​ 2.2使用包裹要过渡的元素，并配置name属性：

<transition name="hello">
	<h2 v-show="isShow"></h2>
</transition>

​ 2.3备注：若有多个元素需要过渡，则需要使用,且每个元素都要指定key值

动画：

<template>
  <div>
    <!-- 动画效果 -->
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 需要动画效果的就放到transition里面去，准备好样式和动画即可 -->
    <!--  appear="true"：已进入页面就自动开启动画入场 -->
    <!-- appear="true"：appear属性的属性值是字符串true，会报错 -->
    <!-- :appear="true"：appear属性的值是表达式true 可以直接只写appear-->
    <!-- :appear="false"：等于没有这个属性 -->
    <transition name="show" appear>
      <h2 v-show="isShow">干饭人干饭魂</h2>
    </transition>
    <!-- transition在页面解析时，不会渲染成dom元素 -->
  </div>
</template>

<script>
export default {
  name: "testAnima",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {},
};
</script>

<style scoped>
h2 {
  background: wheat;
}
/* vue命名好了的类型，不可以自定义 */
/* 若transition标签添加了name属性，就用name值代替v */
/* .v-enter-active {
  animation: showTime 1s;
} */
.show-enter-active {
  animation: showTime 1s linear;
}
.show-leave-active {
  animation: showTime 1s linear reverse;
}

@keyframes showTime {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>>

过渡：

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 过渡 -->
    <!-- transition标签中放多个元素会报错，只能使用一个元素，只对第一个dom元素有效 -->
    <!-- <transition name="show" appear>
      <h2 v-show="isShow">干饭人干饭魂</h2>
      <h3 v-show="isShow">打工人打工魂</h3>
    </transition> -->
    <!-- 用div包裹起来也可以 -->
    <!-- <transition name="show" appear>
      <div v-show="isShow">
        <h2>干饭人干饭魂</h2>
        <h3>打工人打工魂</h3>
      </div>
    </transition> -->
    <!-- transition-group可以对多个元素有效，配合key属性使用 -->
    <transition-group name="show" appear>
      <p v-show="!isShow" key="1">干饭人干饭魂</p>
      <p v-show="isShow" key="2">打工人打工魂</p>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
p {
  background: wheat;
  /* 谁变就给谁变 */
  /* 可以不添加在原先有的代码 */
  /* transition: 0.5s linear; */
}
/* 来的起点和去的终点是一致的 */
.show-enter,
.show-leave-to {
  transform: translateX(-100%);
}
/* 来的终点去的起点是一致的 */
.show-enter-to,
.show-leave {
  transform: translateX(0px);
}
/* .show-leave {
  transform: translateX(0px);
}
.show-leave-to {
  transform: translateX(-100%);
} */
/* 将过渡的效果添加到来去激活时的样式 */
.show-enter-active,
.show-leave-active {
  transition: 0.5s linear;
}
</style>

动画库：

Animate.css：成型的动画库

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- enter-active-class/leave-active-class:进入和离开时的样式，去官网找样式 -->
    <transition-group
      appear
      name="animate_animated animate_bounce"
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="!isShow" key="1">干饭人干饭魂</p>
      <p v-show="isShow" key="2">打工人打工魂</p>
    </transition-group>
  </div>
</template>

<script>
// 引入样式库
import "animate.css";
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
p {
  background: wheat;
}
</style>