关于javascript:通过示例了解Vue过渡和动画

作者：Matt Maribojoc
译者：前端小智
起源：stackabuse

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

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

Vue 过渡和动画让咱们网站更具现代感并为网站访问者提供更好的用户体验的好办法。侥幸的是，对于开发人员而言，Vue 动画只需几分钟即可实现设置。

文本次要介绍 Vue <transition>元素，应用该元素创立一些 Vue 动画，并理解将其增加到我的项目中的基本知识。

首先，咱们来看一下 Vue Transitiont 怎么解决有条件的渲染内容。

而后，创立本人的 CSS 动画款式。

最初，咱们将理解如何将第三方 CSS 库与 Vue 动画一起应用。

尽管大多数人认为过渡只是装璜，但精心设计的过渡能够：

抓住并疏导用户的注意力
强调重要信息
疏导用户浏览页面
帮忙建设更业余的品牌形象

所有这些要点都将有助于改善咱们网站的用户体验，进步转化率和用户留存率，这是双赢呀。

为了适应少数的开发人员，VueJS 提供了几种实现过渡的办法：

css 或动画过渡款式
JS Hook 对 DOM 进行编辑
集成第三方 CSS

这些办法的难度取决于你现有的常识。

transition 元素是帮忙咱们向元素增加过渡性能的包装器。它提供了不同的钩子，并向一直变动的元素增加了类，这样咱们就能够在转换的不同阶段对它们进行款式化。

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

将自定义库增加到代码中时，这特地有用，稍后，咱们会做阐明。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

另外，transition元素还会收回 JS 钩子函数，因而咱们能够捕捉它们并应用 JS 来执行动画。可用的钩子有：

before-enter / before-leave
enter / leave
after-enter / after-leave
enter-cancelled / leave-cancelled

<transition   @before-enter='beforeEnter'>
    <!-- ... -->
</transition>

而后，咱们能够在 JS 中解决它们。

beforeEnter(el, done) {done()
}

下面介绍的只是一些根底，在我的项目中，会遇到比较复杂的场景，这要怎么做呢？

这个很简略就能实现了，只需将appear 属性增加到transition 元素中，如下所示：

<transition name="fade" appear>
...
</transition>

假如有两个这样交替的div。

<transition name="fade" appear>
  <div v-if="visible">
    Option A
  </div>
  <div v-else>
    Option B
  </div>
</transition>

咱们要做的就是将它们包在 transition 中，这样过渡款式将同时实用于两者。

要使代码按咱们心愿的形式起作用，须要留神以下几点：

相对定位元素

当 Vue 在两个元素之间过渡时，有时会同时显示两个元素并进行进去 / 来到的过渡。如果要取得平滑的成果，则可能须要将它们相对定位在彼此的顶部。

否则，将元素增加到 DOM 中或从 DOM 中删除时，这些元素可能只是在各处跳跃。

2. 如果元素是一样的，则必须向该组件增加一个 key 属性

如果元素是一样的，Vue 会尝试优化内容，仅替换元素的内容。依据文档，如果要在多个元素之间进行过渡，最好始终增加 key。

Vue 能够检测到过渡 / 动画何时完结，然而如果咱们想设置确切的持续时间，能够通过 duration 属性设置。

咱们能够为 enter 和leave过渡都传递一个值，也能够传有两个值的对象。

<transition :duration="500">...</transition> 
...
<transition :duration="{enter: 1000, leave: 200}">...</transition>

咱们要做的就是将动静组件包装在 transition 元素中。

 <transition name="fade" appear>
     <component :is='componentType' />
 </transition>

在开发过程中，尝试设计可重用组件是一个很好的习惯。

封装一个可重用的 transition 很简略，在 transition 里放个 slot，如下所示：

 <template>
   <transition name="fade" appear>
     <slot></slot>
   </transition>
 </template>

当初，咱们就不用放心将过渡款式，名称和所有内容增加到每个组件中，而只需应用此组件即可。

目前为止，咱们曾经理解了 <transition> 元素，当初就能够应用它来制作动画。

<template>
  <div class='main-content'>
    <transition name='rotate'>
      <img 
        v-if='show' 
        src='../img/logo.png'
      > 
    </transition>
  </div>
</template>

<script>
export default {data () {
    return {show: true}
  }
}
</script>

接下来，咱们增加一个按钮，通过切换变量的值来切换元素的显示。

<button @click='show = !show'> Toggle </button>

设置了元素的条件渲染后，咱们应用两个类来设置动画的款式：rotate-enter-active和rotate-leave-active，因为咱们将过渡命名为rotate。

一个技巧是让来到和进入应用雷同动画，只是它们的方向相同。

@keyframes rotate {0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% {opacity: 1; transform: scale(1) rotate(0deg); }
}

.rotate-enter-active {animation: rotate 0.2s;}

.rotate-leave-active {animation: rotate 0.2s reverse;}

当初，切换咱们的组件时，咱们应该看到相似这样的内容。

假如咱们不想本人编写所有的 CSS 动画。有很多很棒的 CSS 动画库，能够很容易地将它们合并到 VueJS 动画中。

在第一个示例中，咱们只应用了 <transition> 元素生成的默认类名，然而咱们能够做的就是将这些值笼罩到咱们想要的任何类中，在这种状况下，它将是 CSS 库中的类名。

对于咱们的示例，咱们应用的 [Animate.css](https://daneden.github.io/animate.css/) 这个动画库，咱们只需将 CDN 链接增加到咱们的index.html 文件即可。

// index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

当初，在咱们的 <transition> 元素中，咱们能够应用 enter-active-class 和leave-active-class属性将过渡连贯到Animate.js。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

超级简略，运行成果如下：

~ 完，我是前端小智，去板砖咯，咱们下期见！

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

原文：https://learne.co/2020/02/vue…

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

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

关于javascript:通过示例了解Vue过渡和动画

了解 Vue 过渡

增加 Vue 过渡到咱们的我的项目

<transition> 元素是啥？

Vue Transition 高级用法

让组件在加载下过渡

在多个元素之间过渡

更改过渡工夫

动静组件之间的转换

创立一个可重用的 transition 组件

建设第一个动画

应用第三方库

交换