vue多种实现动画效果分享【推荐学习】

这篇具有很好参考价值的文章主要介绍了vue多种实现动画效果分享【推荐学习】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

平时上网我经常能在app或者网页上看到很多比较酷的动画效果,这些效果还是比较吸引人的。那么我们自己在写项目时,也都希望能在页面做出一些很酷的动画效果,页面看起来也会更具特色。所以我总结了一些在vue的项目开发中,我们能够实现动画效果的方法,希望能够帮助到大家。以下我已经使用快捷方式创建了一个vue项目,再创建不同页面并引用来展示不同的效果

动画的基本实现

通常我们实现动画效果会用到CSS中的class类,这也是比较基本的方式实现动画。先利用@keyframes定义一个动画,再在需要实现该动画的DOM结构中使用animation属性引用该动画。通常我们在animation属性中会使用到四个值,分别是动画名、动画完成需要的时间、动画的效果、动画循环的次数,但其实animation可以设置的值还有很多,这里我们只使用这四种。@keyframes定义整个动画的过程,从开始的 0% 到结束的 100% ,中间也能设置其他过程节点,在这些节点上设置不同的属性效果,从而实现动画。这种方式在平时的html中同样适用。

<template>
  <div class="box"></div>
</template>

<script>
</script>

<style scoped>
  .box{
    width: 50px;
    height: 50px;
    background: rgb(112, 251, 112);
    position: relative;
    animation: move 2s linear infinite;
  }
  @keyframes move{
    0%{
      left:0px;
    }
    50%{
      left:200px;
    }
    100%{
      left: 0px;
    }
  }
</style>

Vue组件-Transition

<Transition> 是vue的一个内置组件,这意味着它在任意别的组件中都可以直接被使用,无需注册。它可以设置其内部元素进入和离开的动画,主要由 v-ifv-show 触发,也可以由特殊元素 <component> 切换的动态组件,或者改变特殊的key属性来触发,原理就是元素的出现和消失,这里我只以v-if为例。这种方法是由class属性来控制动画的过渡效果,总共有六种用于过渡的class属性(其中 v 指<Transition>里面的name属性)

  1. v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。
  2. v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
  3. v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。
  4. v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。
  5. v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
  6. v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from`被移除的同时),在过渡或动画完成之后移除。
<template>
  <button @click="toggle">click</button>
  <Transition name="fade" >
    <h1 v-if="showTitle">你好 vue</h1>
  </Transition>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    let showTitle = ref(true)
    const toggle = () =>{
      showTitle.value = !showTitle.value
    }

    return {
      showTitle,
      toggle
    }
  }
}
</script>

<style scoped>
  .fade-enter-active,.fade-leave-active{
    transition: opacity 1s ease;
  }
  .fade-enter-from,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-to,.fade-leave-from{
    opacity: 1;
  }
  /* 以下部分在上面动画基础上添加缩放动画效果 */
  /* .fade-enter-active{
    animation:bounce 1s ease;
  }
  .fade-leave-active{
    animation:bounce 1s ease reverse;
  }

  @keyframes bounce{
    0%{transform:scale(0);}
    50%{transform:scale(1.2);}
    100%{transform:scale(1);}
  } */
</style>

Transition生命周期函数

除了使用class属性控制动画的过渡效果,<Transition>内还可以使用生命周期方法来控制动画效果,也就是对<Transition>绑定其特有的事件,事件触发相应的js函数实现动画效果,同样控制元素进入和离开的动画。总共有六个生命周期函数,它们只能被<Transition>使用

1. @before-enter=" "  //进入前触发
2. @enter=" " //进入期间触发
3. @after-enter=" " //进入后触发
4. @before-leave=" " //离开前触发
5. @leave=" " //离开期间触发
6. @after-leave=" " //离开后触发

(由于js可以设置和控制很多类型的动画,这里没有做详细动画演示,大家可以自己填入设计)

<template>
  <button @click="isShow = !isShow">click</button>
  <Transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  >
    <h1 v-if="isShow">hello vue</h1>
  </Transition>
  
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {
    const isShow = ref(true)

    const beforeEnter = () =>{

    }
    const enter = () =>{
      
    }
    const afterEnter = () =>{
      
    }
    const beforeLeave = () =>{
      
    }
    const leave = () =>{
      
    }
    const afterLeave = () =>{
      
    }
    return {
      isShow,
      beforeEnter,
      enter,
      afterEnter,
      beforeLeave,
      leave,
      afterLeave
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

借助第三方库

通过已经封装好的第三方库,我们可以更加方便的实现自己想要的动画效果,这里为大家推荐两个动画库 animate.cssGSAP

animate.css

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

这个动画库里已经封装好了很多可以选择的动画效果,它是通过CSS来实现的。通过 npm 或 yarn 安装就可以引入使用,引入也可以通过 import 或 link 引入,比较方便。使用时,只要在需要动画的元素的class类中加入animate__animated 和相应动画的类名就可以实现动画,也可以配合<Transition>等使用,达到自己想要的效果。这里配合<Transition>,直接设置enter-active-class 和 leave-active-class 属性类名,分别表示进入动画和离开动画。

<template>
  <button @click="isShow = !isShow">click</button>
  <Transition
   enter-active-class="animate__animated animate__bounceInDown"
   leave-active-class="animate__animated animate__bounce">
    <h1 v-if="isShow">hello vue</h1>
  </Transition>
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {
    const isShow = ref(true)

    return {
      isShow
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

GSAP

GSAP 中文教程 中文文档 |官方文档 官方教程翻译 |好奇代码出品

和 animate.css 不同,GSAP 是通过js来实现动画的,好处就是一些想到的动画效果是css很难实现的,而js就能更加好地完成。可以通过 npm 安装,也可以直接 CDN 引入,这样就可以在我们的项目中使用这些动画了。这里我们讲里面的 tween 动画类型,也叫补间动画,就是我们常见的两个状态之间的变化的动画方式,比如我们常见的匀速、缓入缓出动画就是Tween类型的动画。总共有四种Tween的动画方式:

  • gsap.to(): 这是一种最常用的tween动画,就是让元素从初始状态变化到目标状态。
  • gsap.from(): 有点像to方法的逆向变化,就是让元素从目标状态变化到初始状态。
  • gsap.fromTo(): 需要自己定义两个状态的数据,然后从前一个变化到后一个。
  • gsap.set():直接设置成想要的状态,没有任何过度与动画效果。本质上就是duration为0的 .to 方法

假如我们创建一个动画,代码为:gsap.to(".box", { x: 200 }),其中的两个参数分别表示目标和对象参数,意思是把带有’.box’类名的元素移动到x为200的位置”(就像transform: translateX(200px))。我们这里配合<Transition>的生命周期函数完成一个动画:

<template>
  <button @click="isShow = !isShow">click</button>
  <Transition @enter="enter" @leave="leave">
    <h1 v-if="isShow">hello vue</h1>
  </Transition>
</template>

<script>
import { ref } from 'vue';
import gsap from 'gsap'

export default {
  setup () {
    const isShow = ref(true)
    const enter = (el,done) =>{
      gsap.from(el,{ //el表示目标dom结构,即元素
        scale:0, //缩放到0
        x:200, // x方向移动200px
        onComplete:done //参数done是一个函数,若传入了该参数,就必须调用,表示动画完成,否者看不到动画效果
      })
    }
    const leave = (el,done)=>{
      gsap.to(el,{
        scale:0,
        x:200,
        onComplete:done
      })
    }
    return {
      isShow,
      enter,
      leave
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

再制作一个数字变化加载的动画效果:

<template>
  <input type="number" step="100" v-model="counter">
  <h1>{{ showNumber }}</h1>
</template>

<script>
import { toRefs, watch, reactive } from 'vue';
import gsap from 'gsap'

export default {
  setup () {
    
    const state = reactive({
      counter:0,
      showNumber:0
    })

    watch( //监听变量的值的变化
      () => state.counter,
      (newVal) =>{
        gsap.to(state,{duration:1,showNumber:newVal}) //duration的值控制动画的事件
      }
    )

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

Transition-group

<transition>中只能包裹一个元素,当出现需要多个元素时,可以使用<Transition-group>,下面也简单制作了一个多元素,数据变化的一个动画:

<template>
  <div>
    <button @click="addNum">add</button>
    <button @click="removeNum">remove</button>
    <button @click="shuffleNum">shuffle</button>

  </div>
  <transition-group name="fade">
    <span v-for="item in numbers" :key="item">{{ item }}</span>
  </transition-group>
</template>

<script setup>
import { ref } from 'vue';
import _ from 'lodash' //先npm安装,再引用

const numbers = ref([0,1,2,3,4,5,6,7,8])
const count = ref(10)
const addNum = ()=>{ //在随机位置添加 count
  numbers.value.splice(randomIndex(),0,count.value++)
}

const removeNum = () => { //删除随机一个位置的数
  numbers.value.splice(randomIndex(),1)
}

const shuffleNum = () => { //借助lodash库,已经封装的打乱数组的方法
  numbers.value = _.shuffle(numbers.value)
}

const randomIndex = () =>{ //随机数方法
  return Math.floor(Math.random()*numbers.value.length)
}
</script>

<style scoped>
  span{
    margin-right: 10px;
    display: inline-block;
  }
  .fade-enter-from,.fade-leave-to{
    opacity: 0;
    transform: translateY(30px);
  }
  .fade-enter-active,.fade-leave-active{
    transition:all 1s ease
  }
  .fade-leave-active {
    position: absolute;
  }
  /*移动时的动画效果*/
  .fade-move { 
    transition:transform 1s ease;
  }
</style>

总结

制作动画的方法有很多,很多生动的动画效果才能引用人的眼球,希望以上动画的实现方法能够帮助到大家,结合自己的想象,也可以制作更多炫酷的效果。

学习更多前端vue开发知识请关注CRMEB开源商城 ,附件下载:点此下载文章来源地址https://www.toymoban.com/news/detail-708226.html

到了这里,关于vue多种实现动画效果分享【推荐学习】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

    前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:           #### 使用方法 ```使用方法 swiperTabList: [\\\"2023-06-10\\\",\\\"2023-06-11\\\",\\\"2023-06-12\\\",\\\"2023-06-13\\\",\\\"2023-06-14\\\",\\\"2023-06-15\\\"], //导航列表 swiperTabIdx:

    2024年02月08日
    浏览(46)
  • Revit二次开发知识分享(二十四)实现鼠标可视化跟随动画效果

    背景:群友询问:怎样子实现在批量选择完管道,在点击放置标签时,想有一个可视化跟随的动画效果。然后研究了一番,下面提供了一个简易版的实行方案,大家可以参考学习。 源码 实现如下图所示的选择完管件后,鼠标动画跟随效果 其中Rectangle是当前视图边框投影到屏

    2024年02月10日
    浏览(73)
  • Vue过渡与动画的实现效果

     使用 transition 标签配合 CSS3 过渡实现【不完整代码】: Vue 还提供了四个 class 类名,分别是进入的起点(v-enter)进入的终点(v-enter-to)离开的起点(v-leave)离开的终点(v-leave-to) 注 :进入的起点 和 离开的起点 就相当于 CSS3 动画里的 from  进入的终点 和 离开的终点 就相

    2024年02月02日
    浏览(40)
  • uniapp实现红包动画效果(vue3)

    首先安装CSS动画库animate.css依赖 打开main.ts文件引入 这两张图片放入static文件夹下 用到的图片red1.png 用到的图片red2.png 红包整体主要分三部分 红包头部 中部 底部 使用uni.createAnimation()创建动画实例并进行相关操作具体查看官方文档 除了红包底部 头部和中部需要定位

    2024年02月12日
    浏览(50)
  • 011:vue结合css动画animation实现下雪效果

    GIF录屏文件太卡有点卡,实际是很丝滑的 在 src 下新建 components 文件,创建 VabSnow.vue 组件文件 没啥注意的,主要是scss的变量操作及css动画 😎

    2024年01月19日
    浏览(53)
  • JavaScript、Vue实现大数据大屏展示3D旋转动画效果

    最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到上一个菜单效果。 首先我们先构建一个大体的dom结构,如下: 编写基本的css样

    2024年02月11日
    浏览(41)
  • 【数据结构与算法】Vue3实现选择排序动画效果与原理拆解

    删除有序数组中的重复项 JavaScript实现选择排序 选择排序(Selection Sort)是一种简单的排序算法,其基本思想是从待排序的数据中选择最小(或最大)的元素,然后将其放到已排序的序列的末尾(或开头)。该算法的时间复杂度为O(n^2),其中n是待排序数据的数量,因此在大规

    2024年02月13日
    浏览(38)
  • 前端js如何实现截屏功能,插件推荐js-web-screen-shot

    读取dom结构转换成canvas,最后转成图片形式展示 缺点 :没有编辑功能 链接:html2canvas 大佬模仿qq截图实现的,也可以搭配webrtc实现web端远程桌面共享 链接: github gitee 简单使用 注意点:

    2024年02月06日
    浏览(48)
  • uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序

    如果您是 Vue.js / Nuxt.js 等项目,请访问 这篇文章。 本文实现了 uniapp 全端兼容,在函数内用 JS 让一个元素(DOM),“重复执行” 写好的 CSS 动画,类似点赞动画一样, 你可以直接复制示例源码,稍微改改(写上你想要的动画,换个元素就行)就能应用到您的项目中去, 如下图

    2023年04月08日
    浏览(85)
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一、实现效果 使用echarts实现省市地图绘制,你也可以绘制全国地图。 根据数据在地图显示柱状图,根据经纬度实现定位。 根据数据显示数据,涟漪动态效果。 当然你也可以根据你自己的需求,增删效果哦。 二、实现方法 1、安装echarts插件 2、获取省市json数据 https://datav.

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包