vue 之 Transition &amp；&amp；各种动画实现，一文让你会动画_transition vue

最新推荐文章于 2024-09-29 07:35:32 发布

参考信息

最新推荐文章于 2024-09-29 07:35:32 发布

阅读量445

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/138950891

版权

程序员专栏收录该内容

197 篇文章 1 订阅

订阅专栏

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

8、 Transition组件的回调函数

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
>
  <div v-if="isShow">
    <span>one</span>
  </div>
</transition>

:css=“false”. 会让Vue跳过css检测，提高性能，同时防止过渡过程中受css样式的影响

before-enter : 动画进入之前触发 ---- from，初始化操作
enter : 动画正在进入时触发 ---- active，写js,执行具体的动画
after-enter : 动画进入之后触发 ---- to，结束，收尾工作
enter-cancelled : 动画进入失败触发

before-leave : 动画离开之前触发
leave : 动画正在离开时触发
after-leave : 动画离开之后触发
leave-cancelled : 动画离开失败触发

el : 执行动画的那个元素

done : 当使用javaScript来执行过渡动画时，需要进行done回调，否则它们将会被同步调用，过渡会立刻完成

接下来使用其他封装好的第三方动画库啦～

二、使用animate.css第三方动画库

Animate.css | A cross-browser library of CSS animations.

1.安装

npm install animate.css

2.导入

在main.js中进行导入

import 'animate.css'

3.使用

01-在css中使用

代码

<template>
  <div class="box">
    <button @click="isShow = !isShow">切换</button>
    <transition name="run" appear>
      <div v-if="isShow">
        <span>one</span>
      </div>
    </transition>
  </div>
</template>

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

<style lang="scss" scoped>
.run-enter-active {
  animation: lightSpeedInRight 2s linear 0s;
}
.run-leave-active {
  animation: lightSpeedOutRight 2s linear 0s;
}
</style>

效果

说明

02-使用class类名

这里需使用enter-active-class 和 leave-active-class，css部分可以不写啦

代码

可以不用写name了，如果写了class类名，类名的优先级会更高

<template>
  <div class="box">
    <button @click="isShow = !isShow">切换</button>
    <transition enter-active-class="animate__animated animate__backInDown" leave-active-class="animate__animated animate__backOutLeft">
      <div v-if="isShow">
        <span>one</span>
      </div>
    </transition>
  </div>
</template>

效果

说明

三、使用gsap库 ( JS库 )

GreenSock - Docs - Gsap

某些情况下，如果希望通过JavaScript来实现动画效果，那么可以使用gsap库来完成

GSAP : The GreenSock Animation Platform ( GreenSock动画平台 ) 的缩写
可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且兼容浏览器

1.安装

npm install gsap

2.导入

在组件内部导入即可

import gsap from 'gsap'

3.使用

需要使用enter和leave回调函数

<template>
  <div class="box">
    <button @click="isShow = !isShow">切换</button>
    <transition appear @enter="enter" @leave="leave" :css="false">
      <div v-if="isShow">
        <span>one</span>
      </div>
    </transition>
  </div>
</template>
<script>
// 导入
import gsap from 'gsap'
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    enter(el, done) {
      // 从哪里来
      gsap.from(el, {
        // 缩小为0
        scale: 0,
        // 透明度
        opacity: 0,
        // 持续时间
        duration: 1,
        // translatex便宜200
        x: 200,
        // 这样设置比较好
        onComplete: done
      })
    },
    /**
     * 这里只需要制定最开始的状态，不用制定后面的状态，有点不好理解
     */
    leave(el, done) {
      // 到哪里去
      gsap.to(el, {
        scale: 0,
        opacity: 0,
        duration: 1,
        x: -200,
        onComplete: done
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>

4.效果

5.gsap额外补充 ( 数字变化效果 )

代码

<template>
  <div class="box">
    <input type="number" step="100" v-model="count" />
    <div>
      <span class="text-color">{{ showNumber.toFixed(0) }}</span>
    </div>
  </div>
</template>
<script>
import gsap from 'gsap'
export default {
  data() {
    return {
      count: 0,
      showNumber: 0
    }
  },
  watch: {
    // 监听输入值的改变
    count(newValue) {
      // 把当前this存进去，实时更改showNumber的值
      gsap.to(this, { duration: 0.5, showNumber: newValue })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 200px;
  background-color: skyblue;
  box-shadow: 0 0 100px 0 skyblue;
  input {
    border: 3px solid rgb(7, 172, 237);
    border-radius: 10px;
    padding: 5px 10px;
    width: 100px;
    background-color: skyblue;
  }
  .text-color {
    display: inline-block;
    background-image: linear-gradient(to right, orange, purple);
    background-clip: text;
    color: transparent;
    font-size: 50px;
  }
}
</style>

效果

四、列表的过渡 transition-group

在上面的文章中，过渡动画只是针对单个元素或者单个组件的，如果希望渲染的是一个列表，并且该列表中添加、删除数据也希望有动画执行

使用 transition-group :

1.列表数字增加删除效果

01-代码

<template>
  <div class="box">
    <div>
      <button @click="addNum">添加</button>
      <button @click="removeNum">删除</button>
    </div>
    <transition-group tag="p" name="run">
      <span class="item" v-for="item in dataList" :key="item">{{ item }}</span>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      defaultNumber: 10
    }
  },
  methods: {
    // 随机位置增加一个数字
    addNum() {
      this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++)
    },
    // 随机位置删除一个数字
    removeNum() {
      this.dataList.splice(this.randomIndex(), 1)
    },
    // 随机取一个位置
    randomIndex() {
      return Math.floor(Math.random() * this.dataList.length)
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  display: inline-block;
  margin-right: 10px;
  display: inline-block;
  background-image: linear-gradient(to right, orange, purple);
  background-clip: text;
  color: transparent;
  font-size: 30px;
}
.run-enter-from,
.run-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
.run-enter-active,
.run-leave-active {
  transition: all 1s linear 0s;
}
</style>

效果

02.效果优化

优化点 : 新增和删除的节点是有动画，但是对于其他需要移动的节点是没有动画的

可以通过新增的v-move的class来完成动画，它会在元素改变位置的过程中应用

css代码

<style lang="scss" scoped>
.item {
  display: inline-block;
  margin-right: 10px;
  display: inline-block;
  background-image: linear-gradient(to right, orange, purple);
  background-clip: text;
  color: transparent;
  font-size: 30px;
}
.run-enter-from,
.run-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
.run-enter-active,
.run-leave-active {
  transition: all 1s linear 0s;
}
// 移除的时候需要加上
.run-leave-active {
  position: absolute;
}
// 加上这个
.run-move {
  transition: transform 1s linear 0s;
}
</style>

效果

03.增加洗牌效果

one-安装lodash库

npm install lodash

two-导入

import _ from 'lodash'

three-使用

<template>
  <div class="box">
    <div>
      <button @click="addNum">添加</button>
      <button @click="removeNum">删除</button>
      <button @click="shuffleNum">洗牌</button>
    </div>
    <transition-group tag="p" name="run">
      <span class="item" v-for="item in dataList" :key="item">{{ item }}</span>
    </transition-group>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      defaultNumber: 10
    }
  },
  methods: {
    // 随机位置增加一个数字
    addNum() {
      this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++)
    },
    // 随机位置删除一个数字
    removeNum() {
      this.dataList.splice(this.randomIndex(), 1)
    },
    // 洗牌
    shuffleNum() {
      this.dataList = _.shuffle(this.dataList)
    },
    // 随机取一个位置
    randomIndex() {
      return Math.floor(Math.random() * this.dataList.length)
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  display: inline-block;
  margin-right: 10px;
  display: inline-block;
  background-image: linear-gradient(to right, orange, purple);
  background-clip: text;
  color: transparent;
  font-size: 30px;
}
.run-enter-from,
.run-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
.run-enter-active,
.run-leave-active {
  transition: all 1s linear 0s;
}
// 移除的时候需要加上
.run-leave-active {
  position: absolute;
}
// 加上这个属性
.run-move {
  transition: transform 1s linear 0s;
}
</style>

fore-效果

2.列表的交替动画效果

01-用css实现

代码

<template>
  <div class="box">
    <input type="text" v-model="keyWords" />
    <transition-group tag="ul" name="run" class="nav">
      <li class="item" v-for="item in filterData" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWords: '',
      dataList: ['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa']
    }
  },
  computed: {
    // 赛选一下
    filterData() {
      return this.dataList.filter((item) => item.includes(this.keyWords))
    }
  }
}
</script>

<style lang="scss" scoped>
.run-enter-from,
.run-leave-to {
  opacity: 0;
  transform: translateX(100px) rotate(180deg);
}
.run-enter-active,
.run-leave-active {
  transition: all 1s linear 0s;
}
.box {
  padding: 100px 0;
  background-color: skyblue;
  box-shadow: 0 0 100px 0 skyblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  input {
    border: 3px solid rgb(7, 172, 237);
    border-radius: 10px;
    padding: 5px 10px;
    width: 100px;
    background-color: skyblue;
  }
  .text-color {
    display: inline-block;
    background-image: linear-gradient(to right, orange, purple);
    background-clip: text;
    color: transparent;
    font-size: 50px;
  }
}
.nav {
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  .item {
    flex: 1;
  }
}
</style>

效果

ps : 那么是同时消失，同时出现，实现不了交替效果

02-使用js实现动画

通过delay属性，实现交替效果

代码

<template>
  <div class="box">
    <input type="text" v-model="keyWords" />
    <transition-group tag="ul" name="run" class="nav" @enter="enter" @leave="leave" appear>
      <!-- 使用data-*这样的属性，给每个动画元素加上index -->
      <li class="item" v-for="(item, index) in filterData" :data-index="index" :key="item">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data() {
    return {
      keyWords: '',
      dataList: ['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa'],
      // 抽取一下动画参数
      transitionOption: {
        opacity: 0,
        scale: 0.5,
        height: 0,
        rotate: 360
      }
    }
  },
  computed: {
    // 赛选一下
    filterData() {
      return this.dataList.filter((item) => item.includes(this.keyWords))
    }
  },
  methods: {
    enter(el, done) {
      gsap.from(el, {
        ...this.transitionOption,
        // 设置延迟时间，因为是交替，所以每个都要不一样
        delay: el.dataset.index * 0.2,
        xPercent: -20,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        ...this.transitionOption, // 设置延迟时间，因为是交替，所以每个都要不一样
        delay: el.dataset.index * 0.2,
        xPercent: 20,
        onComplete: done
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 100px 0;
  background-color: skyblue;
  box-shadow: 0 0 100px 0 skyblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  input {
    border: 3px solid rgb(7, 172, 237);
    border-radius: 10px;
    padding: 5px 10px;
    width: 100px;
    background-color: skyblue;
  }
  .text-color {
    display: inline-block;
    background-image: linear-gradient(to right, orange, purple);
    background-clip: text;
    color: transparent;
    font-size: 50px;
  }
}
.nav {
  width: 100%;
  // display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  .item {
    flex: 1;
  }
}
</style>

效果

五、数字滚动效果

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端字节跳动真题解析
【269页】前端大厂面试题宝典

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

.nav {
width: 100%;
// display: flex;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
position: relative;
.item {
flex: 1;
}
}


**效果**


**![](https://i-blog.csdnimg.cn/blog_migrate/f8e302ac90c7e02e13131d4dc99d6150.gif)**


## **五、数字滚动效果**


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

* **前端字节跳动真题解析**  

  ![](https://i-blog.csdnimg.cn/blog_migrate/e4105708c4a5755616f879f5976b99d5.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://i-blog.csdnimg.cn/blog_migrate/a54028fa5f3725b698fb1915b7408ed7.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。