likes
comments
collection
share

Vue实现页面动态效果之菜就多练

作者站长头像
站长
· 阅读数 20

在Vue.js的世界里，为用户界面增添生动的动态效果是提升用户体验的关键一环。Vue不仅提供了简洁的API来实现这些效果，还鼓励开发者采用组件化的思维和良好的编程风格来组织代码。本文将引导你从基础到进阶，探索Vue中实现动画的各种技巧和最佳实践。

Vue动画基础

相信很多朋友都知道菜就多练这个表情包，本文将实现一个简单该表情包效果。

Vue实现页面动态效果之菜就多练

简单css属性的切换

其中的app和card等样式均以模块化的形式另起文档存储。

该效果由按钮绑定点击事件改变isActive的状态，来实现动态类名的改变，为false时展现css样式，为true时取消样式。

效果展示 

  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <div :class="['emoji',{hidden:!isActive}]">{{ emoji }}</div>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive">请按这里</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const emoji = '🧟‍♂️'
const name='菜就多练'
const isActive = ref(true)
}
</script>

<style lang="css" scoped>
@import './style/app.css';
@import './style/card.css';
</style>

transition+v-if

这里的实现方法类似于上面的方法，但是不同的是使用了transition，它是一个内置的组件，用于为 Vue 应用中的元素或组件提供过渡动画效果，并且具有类似于钩子函数生命周期的类名。

  • 进入阶段：

    • v-enter: 定义进入过渡的开始状态。在元素被插入到 DOM 之前生效，然后在下一个 DOM 更新周期移除。
    • v-enter-active: 定义进入过渡生效时的状态，可以设置持续时间、延迟等。从元素插入开始生效，直到过渡/动画完成。
    • v-enter-to (Vue 2.1.8及以上版本): 定义进入过渡的结束状态，元素插入后下一帧生效，过渡完成后移除。

  • 离开阶段：

    • v-leave: 定义离开过渡的开始状态。
    • v-leave-active: 定义离开过渡生效时的状态。
    • v-leave-to: 定义离开过渡的结束状态。

首先通过按钮点击改变isActive，通过v-if判断，为true时加载该DOM树，false时不加载。再利用transition的钩子函数，使进入时耗时0.3s和离开时耗时3s来实现快进淡出的效果。

/*进入时*/
.v-enter-from{
  opacity: 0;
}
.v-enter-active{
  transition: .3s;
}
.v-enter-to{
  opacity: 1;
}
/*离开时*/
.v-leave-from{
  opacity: 1;
}
.v-leave-active{
  transition: 3s;
}
.v-leave-to{
  opacity: 0;
}

效果展示

上面展示的是transition默认类名时的使用方法，当需要定制动画效果时，可以使用设定类名,比如我用的<Transition name="slide">，实现移动进入的效果。

效果展示 Vue实现页面动态效果之菜就多练

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.slide-enter-active {
  transition: 3s;
}

.slide-enter-to {
  opacity: 1;
  /* transform: translateX(30px); */
}


.slide-leave-from {
  opacity: 1;
}
.slide-leave-active {
  transition: .3s;
}
.slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
         <Transition name="slide">
           <div v-if="isActive" class="emoji">{{ emoji }}</div>
         </Transition>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive">请按这里</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const emoji = '🧟‍♂️'
const name='菜就多练'
const isActive = ref(true)
</script>
Animations

CSS Animations：适合复杂的序列动画，通过@keyframes定义动画序列，Vue的动态类名允许你精确控制动画的触发时机。

让我们的案例再结合Animations，让动画效果一直循环放大缩小。

.pulse{
    animation-name:pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/*css性能优化 GPU加速 */
@keyframes pulse{
    from{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(1.5,1.5,1.5);
    }
    to{
        transform: scale3d(1,1,1);
    }
}

改变Transition的类名，同时引入animation.css的样式。

<Transition name="pulse">
   <div v-if="isActive" class="emoji">{{ emoji }}</div>
</Transition>

当使用Transition时，只需要定制enter-active-class 和 leave-active-class即可，使动画以放大缩小的动画进入离开。

.pulse-enter-active{
  animation: pulse 1s;
}

.pulse-leave-active{
  animation: pulse 1s;
}

效果展示

使用Animate.css增强Vue动画

Animate.css是一个广受欢迎的CSS动画库，它提供了一系列预设的动画效果。集成Animate.css到Vue项目中，可以极大地简化动画开发流程。

  1. 安装Animate.css：

    npm install animate.css

  2. 在Vue组件中引入：

    <style>
  @import '~animate.css/animate.min.css';
</style>

  3. 应用动画：

     <Transition 
      class="animate__tada animate__bounce" 
      enter-active-class="animate__animated animate__tada"
      leave-active-class="animate__animated animate__bounce"
      >
        <div v-if="isActive" class="emoji">{{ emoji }}</div>
      </Transition >

通过这种animate__animated + animate__****，你可以轻松地为Vue应用中的元素添加各种动画效果，如淡入淡出（fadeIn/fadeOut）、弹跳（bounceIn/bounceOut）等。

结语

Vue.js的动画系统以其灵活性和易用性著称，无论是通过原生的过渡组件、CSS动画还是借助第三方库，都能让你的应用界面生动起来。掌握这些技巧并结合良好的编程习惯，将使你的项目不仅功能丰富，而且视觉效果出众。始终记得，优秀的用户体验往往体现在那些细微的动态交互之中。

转载自:https://juejin.cn/post/7391704618181247028
评论
请登录