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

文章插图

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 ClassesEnter

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

Leave

v-leave-from：起始状态。
v-leave-active：离开的活动状态。在整个动画阶段都会应用。
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>

在两个国家之间切换