关于javascript:Vue-3现实生活中的过渡和微互动

35次阅读

共计 4886 个字符，预计需要花费 13 分钟才能阅读完成。

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

Vue 提供了一种简略优雅的解决动画的办法。你能够通过增加一个 <transition /> 指令轻松利用它们，该指令为你实现所有沉重的工作。或者，你能够利用 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：完结状态。
  4. 在命名过渡的状况下，名称将替换 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，以及如何应用它们来简化代码和提高效率。

最初，文章揭示读者留神应用这些成果时的注意事项，如防止应用过多的动画和成果，免得升高性能和用户体验。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://fadamakis.com/vue-js-real-life-transitions-and-micro-…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
javascript
发表至： javascript
2023-03-30
 0
值得看看，2019 年 11 个受欢迎的 JavaScript 动画库！
关于javascript:如何做好性能压测丨压测环境设计和搭建
关于javascript:前端实现iPhone绕过AppStore从浏览器安装App
charies的使用 (前端模拟后端接口数据利器)