当前位置: 首页 > news >正文

在vue当中使用动画

1.1. 认识Vue的动画
    1. 认识动画:
    • 1.1. 在开发中,想要给一个组件的显示和小时添加某种过渡动画,可以增加用户体验:
      • 1.1.1. React框架本身没有提供给任何动画相关API,所以在React中使用过渡动画需要使用第三方库:react-transition-group
      • 1.1.2. Vue中提供了内阻组件和对应的API来完成动画,可以方便的实现过渡动画效果;
      • 1.1.3. 单元素或者组件实现过渡动画,可以使用transition内置组件来完成动画
    • 1.2. 自己手动做动画的话, 比较麻烦
      • 1.2.1. 需要自己写动画相关的类: 类里面有相关动画属性以及要执行的动画
      • 1.2.2. 当点击按钮时需要在恰当的时机把恰当的类名添加到元素上
      • 1.2.3. 例如:
          opacity: 0;opacity: 1;transition: opacitye 1s  ease;<!-- 默认情况下是0,不能一开始是1,如果一开始是1的话是不会产生动画效果的,需要过渡的过程 --><!-- 自己手动来管理动画相关的类是非常麻烦的,所以Vue提供了transition内置组件 -->
        
    • 1.3. transition组件可添加的元素和组件
      • 条件渲染(v-if)条件展示(使用v-show也可)
      • 动态组件
        <!-- 动态组件切换的过程中也可以有动画 -->
        <!-- componentName: home -> about -->
        <component :is='componentName'></component>
        
      • 组件根节点
          <template><!-- 动画类名添加到home组件的根节点 --><home />  </template>
        
1.2. 动画中常见类的作用
  • 1.2. transition组件的主要作用是:
    • 1.2.1. 不是帮你做动画,而是管理动画相关的类名(恰当时机添加恰当的类名)
    • 1.2.2. 添加类名:
      • 进入动画类名:
        • v-enter-from:进入动画的开始状态
        • v-enter-active:进入动画的过程中(进入过渡动画生效时状态)
          - v-enter-to:进入的终点(进入过渡动画的结束状态)
      • 离开动画类名:
        • v-leave-form:离开动画的开始状态
        • v-leave-active:离开过程中(离开过渡动画生效时状态),
        • v-leave-to:离开的终点(离开过渡动画的结束状态)
          在这里插入图片描述
    • 1.2.3. class命名规则
      • 没有name的transition,所有的class是以v-作为默认前缀;
      • 有name属性,例如,所有的class是以fade-作为前缀;
1.3. animation动画实现
    1. Vue动画的原理
    • 1.1. 不是在帮你做动画,而是在管理动画相关的类名,根据类名来执行动画(在恰当时机添加恰当的类名)
    • 1.2. 插入或删除包含在transition组件中元素实,Vue将会做以下处理:
      • 自动嗅探目标元素是否应用了css过渡或者动画,如果有,在恰当时机添加/删除css类名;
      • transition组件提供了javaScript钩子函数,这些钩子函数将在恰当的时机被调用;
      • 如果没有找到javaScript钩子并且有没有检测到css过渡或者动画,DOM插入、删除将会立即执行。
    1. 同时设置过渡和动画(一般不设置)
    • Vue为了知道过渡的完成,内部是在监听transition或animation, 到底使用哪个取决于元素应用的css规则:
      • 只是使用了其中一个,Vue内部能自动识别类型并设置监听
    • 如果同时使用了过渡和动画
      • 并且在这个情况下可能某一个动画执行结束时,另外一个动画还没结束;
      • 在这种情况下,可以设置type属性为animation或transition来明确的告知Vue监听的类型;
        <template><div class="App"><div><button @click="isShow = !isShow">切换</button></div><transition name='why' type="transition"><h2 v-if="isShow">对于生死的拷问,追寻活着的终极意义以及关怀残缺的灵魂是贯穿史铁生散文的主线。身体上的残疾带来心理的苦闷,这种苦闷却引导他思考个人乃至全人类的遭遇和命运。“一个人,出生了,这就不再是一个可以辩论的问题,而只是上帝交给他的一个事实;上帝在交给我们这件事实的时候,已经顺便保证了它的结果,所以死是一件不必急于求成的事,死是一个必然会降临的节日。”所以生死在史铁生看来,是一件顺其自然的事,不必急于求成,也无需执着,只需要等待这个节日的降临,而剩下的就是怎么活的问题了。</h2></transition></div></template><script setup>import { ref } from 'vue'const isShow = ref(false)</script><style  scoped>h2 {display: inline-block;}.why-enter-from,.why-leave-to {opacity: 0;}.why-enter-to,.why-leave-from {opacity: 1;}.why-enter-active {animation: whyAnim 2s ease;transition: all 2s ease;}.why-leave-active {animation: whyAnim 2s ease reverse;transition: all 2s ease;}@keyframes whyAnim {0% {transform: scale(0);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
      
    1. 显示指定动画时间
    • 可以显示的来指定过渡的时间,通过duration属性
    • duration可以设置两种类型的值:
      • number类型: 同时社子和进入和离开的过渡时间;
      • object类型:分别设置进入和离开的过渡时间
      • 代码如下;
          <template><div class="App"><div><button @click="isShow = !isShow">切换</button></div><!--  :duration="1000" --><transition name='why' type="transition" :duration="{ enter: 800, leave: 1000 }"><h2 v-if="isShow">对于生死的拷问,追寻活着的终极意义以及关怀残缺的灵魂是贯穿史铁生散文的主线。身体上的残疾带来心理的苦闷,这种苦闷却引导他思考个人乃至全人类的遭遇和命运。“一个人,出生了,这就不再是一个可以辩论的问题,而只是上帝交给他的一个事实;上帝在交给我们这件事实的时候,已经顺便保证了它的结果,所以死是一件不必急于求成的事,死是一个必然会降临的节日。”所以生死在史铁生看来,是一件顺其自然的事,不必急于求成,也无需执着,只需要等待这个节日的降临,而剩下的就是怎么活的问题了。</h2></transition></div></template><script setup>import { ref } from 'vue'const isShow = ref(false)</script><style  scoped>h2 {display: inline-block;}.why-enter-from,.why-leave-to {opacity: 0;}.why-enter-to,.why-leave-from {opacity: 1;}.why-enter-active {animation: whyAnim 2s ease;transition: all 2s ease;}.why-leave-active {animation: whyAnim 2s ease reverse;transition: all 2s ease;}@keyframes whyAnim {0% {transform: scale(0);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
        
1.4. 动画常见的属性设置
    1. mode属性(过渡的模式)
    • 默认情况下进入和离开动画时同时发生的,如果不希望同时执行进入和离开动画,可以设置transition的过渡模式
      • in-out: 新元素先进入,完成之后当前元素过渡离开;
      • out-in: 当前元素先进行过渡,完成之后新元素过渡进入;
    1. appear属性
    • 组件首次渲染时触发动画效果‌
1.5. 列表元素动画组设置
    1. 过渡动画针对单个元素或者组件:
    • 要么时单个节点
    • 那么时同一时间渲染多个节点中的一个
    1. 列表中添加删除数据也执行动画
    • 使用<transition-group>组件来完成
1.6. 列表元素的移动动画(列表过渡的移动动画)
  • 新增和删除节点通过<transition-group>是有动画的,其他需要移动的节点是没有动画的
    • 新增的v-model的class来完成动画;
    • 会在元素改变位置的过程中应用
1.7. 示例代码如下:
  • 添加数字示例图如下:
    在这里插入图片描述
  • 删除数字示例图如下:
    在这里插入图片描述
  • 打乱数字示例图如下:
    在这里插入图片描述
<template><div class="App"><button @click="addNumber">添加数字</button><button @click="removeNumber">删除数字</button><button @click="shuffleNumber">打乱数字</button><transition-group tag="div"><template v-for="item in nums" :key="item"><span>{{ item }}</span></template></transition-group></div>
</template><script setup>
import { ref } from 'vue';
import { shuffle } from 'underscore'const nums = ref([0,1,2,3,4,5,6,7,8,9])const addNumber = () => {nums.value.splice(randomIndex(), 0, nums.value.length)
}const removeNumber = () => {nums.value.splice(randomIndex(), 1)
}const shuffleNumber = () => {nums.value = shuffle(nums.value)
}const randomIndex = () => {return Math.floor(Math.random() * nums.value.length)
}
</script><style  scoped>
span {margin-right: 10px;display: inline-block;
}.v-enter-from,
.v-leave-to {opacity: 0;transform: translateY(30px);
}.v-enter-to,
.v-leave-from {opacity: 1;transform: translateY(0px);
}.v-enter-active,
.v-leave-active  {transition: all 2s ease;
}/* 移动动画时元素依旧占位所以使用绝对定位使元素不占位 */
.v-leave-active {position: absolute;
}/* 针对其他移动的阶段需要的动画 */
.v-move {transition: all 2s ease;
}
</style>
http://www.lqws.cn/news/587395.html

相关文章:

  • Oracle 树形统计再进阶:类型多样性与高频类型分析(第三课)
  • Monad:函数式编程中的 “容器模式”
  • 六自由度按摩机器人 MATLAB 仿真
  • Openssl升级
  • SQL规范
  • FastAPI 学习(二)
  • 在Flutter中生成App Bundle并上架Google Play
  • android BottomSheet及AlertDialog的几种material3 常见ui的用法
  • WSL/Linux 常用命令速查
  • Windows 11 安装 Linux 系统详细教程
  • docker安装RabbitMQ,创建RabbitMQ容器以及docker-compose.yml配置
  • 博图SCL编程:结构体(STRUCT)使用详解与实战案例
  • 英国研究团队启动合成完整人类基因组的前沿项目
  • 解决VSCode打开最近项目后终端shell不正常的问题
  • 数据结构入门-图的基本概念与存储结构
  • 数据结构与算法分析课设:一元多项式求值
  • STM32-第一节-新建工程,GPIO,点亮LED,蜂鸣器
  • 零成本接入+企业级部署:2025年AI大模型实战指南
  • 某只股票量化对冲策略计算绘图
  • 利用不坑盒子的Copilot,快速排值班表
  • JSON-LD 开发手册
  • 探索 AI 系统提示与模型资源库:`system-prompts-and-models-of-ai-tools`
  • 门控循环单元(GRU):LSTM 的轻量级高效 “记忆专家”
  • Android Liunx ffmpeg交叉编译
  • 自己电脑搭建本地服务器并实现公网访问,内网也能提供互联网连接使用
  • 零基础学土壤物理建模|Hydrus2D、Hydrus3D实操教程+参数设置技巧
  • 【算法】动态规划 70: 爬楼梯
  • ue xr 系统
  • 飞算 JavaAI 深度实战:从老项目重构到全栈开发的降本增效密码
  • 【Spring AI】 1接入 Ollama实践