VUE L ∠脚手架新生命周期&过度动画 ⑩⑦

---

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示：以下是本篇文章正文内容

$Vuejs$

---

简介 ： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

• 官方

1. 中文 ： https://cn.vuejs.org/
2. 英文 ： https://vuejs.org/
3. Vue2API : https://v2.cn.vuejs.org/
4. Vue2 相关包 ： https://github.com/vuejs/awesome-vue
5. Vue2 入门安装官方 ：https://v2.cn.vuejs.org/v2/guide/installation.html
6. Vue 相关插件 ： https://awesomejs.dev/for/vue/

初识$VueCLI$

  $CLI$ $nextTick$

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

  $CLI$ $Vue$封装的过度与动画

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

• 图示 ↓

• 写法 ↓

1. 准备好样式

• 元素进入的样式：
  1. v-enter：进入的起点
  2. v-enter-active：进入过程中
  3. v-enter-to：进入的终点
• 元素离开的样式：
  1. v-leave：离开的起点
  2. v-leave-active：离开过程中
  3. v-leave-to：离开的终点
     –

2. 使用<transition>包裹要过度的元素，并配置name属性 ↓

   <transition name="hello">
   	<h1 v-show="isShow">你好啊！</h1>
   </transition>
   

3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

代码演示 ↓

<template>
  <div>
    <button @click="isShow=!isShow">启动动画</button>
    <transition-group appear name="group">
      <h1 class="h1" v-show="!isShow" key="1">{
    
    {
    
     name }}</h1>
      <h1 class="h1" v-show="isShow" key="2">{
    
    {
    
     name }}</h1>
    </transition-group>

  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      name: "动画",
      isShow: true
    }
  }
}
</script>

<style scoped>
.h1 {
    
    
  height: 150px;
  width: 100%;
  background: red;
}

.group-enter-active {
    
    
  animation: animate 0.5s linear;
}

.group-leave-active {
    
    
  animation: animate 0.5s linear reverse;
}

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

  $CLI$ $VueAminateBank$

• npm : https://www.npmjs.com/package/animate.css
• 样式演示文档 ： https://animate.style/

使用演示 ↓

扫描二维码关注公众号，回复： 15488096 查看本文章

<template>
  <div>
    <button @click="isShow=!isShow">启动动画</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__backInLeft"
        leave-active-class="animate__backOutLeft"
    >
      <h1 class="h1" v-show="!isShow" key="1">{
    
    {
    
     name }}</h1>
      <h1 class="h1" v-show="isShow" key="2">{
    
    {
    
     name }}</h1>
    </transition-group>

  </div>
</template>

<script>
import 'animate.css';

export default {
    
    
  data() {
    
    
    return {
    
    
      name: "动画",
      isShow: true
    }
  }
}
</script>
<style scoped>
.h1 {
    
    
  height: 150px;
  width: 100%;
  background: red;
}
</style>

总结

以上是个人学习Vue的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波