您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Vue 3现实生活中的过渡和微互动

时间:2023-03-30 12:54:44  来源:微信公众号  作者:大迁世界

 

Vue 提供了一种简单优雅的处理动画的方法。你可以通过添加一个指令轻松应用它们,该指令为你完成所有繁重的工作。或者,你可以利用 JAVAScript 钩子将更复杂的逻辑纳入你的动画中,甚至可以添加第三方库(如 gsap)以实现更高级的用例。

在本文中,我们将研究这些不同的选项,但首先,让我们暂时将 Vue.js 放在一边,讨论 css 过渡和动画之间的差异。

过渡与动画

过渡是在两个不同状态之间进行的。开始状态和结束状态。例如,对于模态组件,开始状态可能是隐藏的,结束状态可能是可见的。你设置这些状态,浏览器会用一系列中间帧填充状态更改。

button {
  background-color: #0ff1ce;
  transition: background-color 0.3s ease-in;
}
button:hover {
  background-color: #c0ffee;
}

如果你想执行一些不涉及明确的起始状态和结束状态的操作,或者你需要更精细地控制过渡中的关键帧,那么你必须使用动画。

button:hover {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: wobble;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  
  15% {
    transform: translateX(-32px) rotate(-6deg);
  }
  
  30% {
    transform: translateX(16px) rotate(6deg);
  }
  
  45% {
    transform: translateX(-16px) rotate(-3.6deg);
  }
  
  60% {
    transform: translateX(10px) rotate(2.4deg);
  }
  
  75% {
    transform: translateX(-8px) rotate(-1.2deg);
  }
}

结果:

图片

如果考虑到可以动画化许多属性,可以将多个动画应用于一个元素,并且可以使用JavaScript来控制它们,那么动画的可能性就无穷无尽。

要了解更多信息,请阅读关于使用CSS动画(MDN)的文章,并尝试使用这个CSS动画生成器进行操作。

通过使用内置的 transition 指令,可以轻松地在 Vue.js 项目中使用过渡和动画。在动画过程中,Vue 会为封闭的元素添加适当的类。

图片

Transition Classes

Enter

  1. v-enter-from:起始状态。
  2. v-enter-active:活动状态。在整个动画阶段都会应用。
  3. v-enter-to:结束状态。

Leave

  1. v-leave-from:起始状态。
  2. v-leave-active:离开的活动状态。在整个动画阶段都会应用。
  3. v-leave-to:结束状态。

在命名过渡的情况下,名称将替换 v- 前缀。

起初,这对我来说有些令人困惑,但当我们深入代码时,一切都会更容易理解。让我们从例子开始。

动画示例

为了简洁起见,一些标记的细节被省略,但所有内容包括实时演示都可在Github上找到。

带渐变动画的切换

图片

<button @click="toggle">Toggle</button>
<transition name="fade">
  <div class="box" v-if="!isHidden"></div>
</transition>
 
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

带滑动动画的切换

图片

在两个按钮之间切换

图片

<transition name="fade" mode="out-in">
  <button @click="toggle" v-if="!isHidden" key="first">First State</button>
  <button @click="toggle" v-else key="second">Second State</button>
</transition>
 
<transition name="fade" mode="out-in">
  <button @click="toggle" v-if="!isHidden" key="first">First State</button>
  <button @click="toggle" v-else key="second">Second State</button>
</transition>

在两个国家之间切换

图片

.bounce-enter-active {
  animation: bounce 0.3s;
}
.bounce-leave-active {
  animation: bounce 0.3s reverse;
}

@keyframes bounce {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

列表添加、删除和洗牌

图片

.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: scale(0);
}

/* Shuffle */
.list-move {
  transition: transform 0.6s;
}

Modal

图片

.modal-enter-from {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

卡片动画

图片

/* moving */
.slideLeft-move {
  transition: all 0.6s ease-in-out 0.05s;
}

/* Appearing */
.slideLeft-enter-active {
  transition: all 0.4s ease-out;
}

/* disappearing */
.slideLeft-leave-active {
  transition: all 0.2s ease-in;
  position: absolute;
  z-index: 0;
}

/* appear at / disappear to */
.slideLeft-enter-from,
.slideLeft-leave-to {
  opacity: 0;
}

展开/收起动画​

图片

.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  height: 0;
}

进阶动画

图片

<div class="progress-steps">
    <div class="progress">
      <div class="percent" :style="{width: `${ (progress-1) * 30 }%`}"></div>
    </div>
    <div class="steps">
      <div class="step" v-for="index in 4" @click="setProgress(index)" :key="index" :class="{'selected': progress === index,  
     'completed': progress > index }"></div>
    </div>
  </div>
 
.container {
  position: relative;
  margin-top: 100px;
}
.progress-steps {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 200px;
}
.step {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid lightgray;
  border-radius: 50%;
  transition: all 0.6s;
  cursor: pointer;
}
.step.selected {
  border: 2px solid #42b983;
}
.step.completed {
  border: 2px solid #42b983;
  background: #42b983;
  border-radius: inherit;
}
.step.completed:before {
  font-family: "FontAwesome";
  color: white;
  content: "f00c";
}
.progress {
  position: absolute;
  width: 100%;
  height: 50%;
  border-bottom: 2px solid lightgray;
  z-index: -1;
}
.percent {
  position: absolute;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #42b983;
  z-index: 1;
  transition: width 0.6s;
}

导航动画

图片

导航动画

This example heavily levarages javascript and the gsap library source code

与Vue 2的区别

动画是受 Vue 3 迁移影响的众多功能之一。迁移构建不会将其报告为重大更改,这可能会令人困惑。

旧类如下:

图片

正如你所看到的,.v-enter和.v-leave类现在被.v-enter-from和.v-leave-from替换了。此外,控制动画类名的过渡元素props的名称从enter-class和leave-class更改为enter-class-from和leave-class-from。

总结

本文介绍了Vue.js在现实生活中如何实现转换和微交互的例子,以及这些功能是如何提高用户体验的。作者指出,Vue.js是一个灵活的框架,可用于实现各种各样的功能。文章中介绍了一些常见的转换和微交互,如弹出窗口、拖动、下拉刷新等,以及如何使用Vue.js实现这些效果。

文章强调了用户体验的重要性,并提供了一些技巧,如利用动画和颜色来吸引用户的注意力,提高用户的参与度。作者还介绍了一些Vue.js插件和库,如Vue-Router、Vuex和AxIOS,以及如何使用它们来简化代码和提高效率。

最后,文章提醒读者注意使用这些效果时的注意事项,如避免使用过多的动画和效果,以免降低性能和用户体验。

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。



Tags:Vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Vue 提供了一种简单优雅的处理动画的方法。你可以通过添加一个指令轻松应用它们,该指令为你完成所有繁重的工作。或者,你可以利用 JavaScript 钩子将更复杂的逻辑纳入你的动...【详细内容】
2023-03-30  Tags: Vue  点击:(0)  评论:(0)  加入收藏
想要在 2023 年构建出色的 Vue.js 应用程序吗?如果你的回答是 YES,那么一定要试一试这篇文章整理的 7 个 Vue 3 插件和库。无需编写大量代码,这些令人难以置信的插件和库就可以...【详细内容】
2023-03-29  Tags: Vue  点击:(5)  评论:(0)  加入收藏
我们的新项目是基于vite + vue3的,使用的编程语言是JavaScript。我们的团队除了我,对typescript都不熟悉,他们觉得学习typescript有点困难。众所周知,JS的弱类型机制,使编辑器很...【详细内容】
2023-03-29  Tags: Vue  点击:(1)  评论:(0)  加入收藏
作者:京东零售 陈艳春前言:组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理...【详细内容】
2023-03-26  Tags: Vue  点击:(2)  评论:(0)  加入收藏
本文是一份分步指南,涵盖了 Vue.js 测试基础知识,并为读者解释了如何测试基于 Vue.js 的网站和移动应用程序。“当 Vue 的用户数量达到一定数量时,它就变成了一个社区。突然间,...【详细内容】
2023-03-16  Tags: Vue  点击:(19)  评论:(0)  加入收藏
前言大家好,我是小满,正所谓:工欲善其事,必先利其器!写一个开源的项目也不例外,就拿在国内很火的 vue3 框架 和 vite 工具来讲,其中的实现与架构设计无不是一个复杂而庞大的工程,而...【详细内容】
2023-03-13  Tags: Vue  点击:(22)  评论:(0)  加入收藏
前言easy-jenkins是一款对vue和jar的部署工具,操作简单,实行一键部署,内部结构采用流水线形式架构,每次部署,时时提供部署过程,部署记录,界面友好简洁,使用方便,符合用户常规操作easy...【详细内容】
2023-03-08  Tags: Vue  点击:(26)  评论:(0)  加入收藏
小程序是一种运行在移动端的应用形式,它可以提供快速、便捷、丰富的用户体验。但小程序的开发需要遵循一套特定的规范和接口,这对于前端开发者来说可能会有一定的学习成本和限...【详细内容】
2023-03-07  Tags: Vue  点击:(2)  评论:(0)  加入收藏
今天再给大家分享一个超不错的 vue3.js 桌面pc端组件库JW-UI。 jw-ui 一个基于 vue3 typescript 开发的开源UI组件库。包含了21个常用组件。 安装npm install yjw-ui快速...【详细内容】
2023-03-05  Tags: Vue  点击:(18)  评论:(0)  加入收藏
作者:京东零售 姜欣关于服务器端渲染方案,之前只接触了基于react的Next.js,最近业务开发vue用的比较多,所以调研了一下vue的服务器端渲染方案。 首先:长文预警,下文包括了两种方案...【详细内容】
2023-02-27  Tags: Vue  点击:(20)  评论:(0)  加入收藏
▌简易百科推荐
Vue 提供了一种简单优雅的处理动画的方法。你可以通过添加一个指令轻松应用它们,该指令为你完成所有繁重的工作。或者,你可以利用 JavaScript 钩子将更复杂的逻辑纳入你的动...【详细内容】
2023-03-30  大迁世界  微信公众号  Tags:Vue   点击:(0)  评论:(0)  加入收藏
1、工具库(1)LodashLodash是一个一致性、模块化、高性能、提高开发者效率的JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 J...【详细内容】
2023-03-30  前端充电宝  微信公众号  Tags:前端   点击:(0)  评论:(0)  加入收藏
想要在 2023 年构建出色的 Vue.js 应用程序吗?如果你的回答是 YES,那么一定要试一试这篇文章整理的 7 个 Vue 3 插件和库。无需编写大量代码,这些令人难以置信的插件和库就可以...【详细内容】
2023-03-29  前端新世  微信公众号  Tags:Vue   点击:(5)  评论:(0)  加入收藏
作为国内知名的互联网公司,腾讯在前端领域做出了很多开源贡献。本文就来盘点腾讯最热门的 10 款前端开源项目!wujie无界微前端是一款基于 Web Components + iframe 微前端框...【详细内容】
2023-03-29  前端充电宝  微信公众号  Tags:前端   点击:(4)  评论:(0)  加入收藏
我们的新项目是基于vite + vue3的,使用的编程语言是JavaScript。我们的团队除了我,对typescript都不熟悉,他们觉得学习typescript有点困难。众所周知,JS的弱类型机制,使编辑器很...【详细内容】
2023-03-29  前端梁哥  今日头条  Tags:Vue   点击:(1)  评论:(0)  加入收藏
作者:京东零售 陈艳春前言:组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理...【详细内容】
2023-03-26  京东云开发者    Tags:Vue   点击:(2)  评论:(0)  加入收藏
之前在项目开发中经常会遇到需要开发各种各样加载动画的需求, 我们可以使用已有的动画库手动改造实现(比如说基于 loaders.css 手动改造), 也可以自己独立设计, 但是这意味...【详细内容】
2023-03-23  趣谈前端  微信公众号  Tags:React   点击:(10)  评论:(0)  加入收藏
今天来分享 6 个超实用的词云库,以快速实现词云效果!wordcloud2.jswordcloud2.js 是一个基于 HTML5 Canvas 的词云库,主要用于生成词云效果。它的特点包括: 可以在浏览器和 Node...【详细内容】
2023-03-23  前端充电宝  微信公众号  Tags:前端   点击:(7)  评论:(0)  加入收藏
webpack 编译流程 初始化参数:从配置文件和 Shell 语句中读取并合并参数,得出最终的配置对象 用上一步得到的参数初始化 Compiler 对象 加载所有配置的插件 执行对象的 run...【详细内容】
2023-03-23  前端餐厅  今日头条  Tags:webpack   点击:(8)  评论:(0)  加入收藏
短视频开发方式往往会影响其开发质量和开发效率,选择合适的开发方式可达到事半功倍的效果。在短视频开发中,前后端分离是一种比较受欢迎的开发方式,为发挥其应有价值,我们应该如...【详细内容】
2023-03-22  云豹科技程序员   网易号  Tags:前后端   点击:(9)  评论:(0)  加入收藏
站内最新
站内热门
站内头条