美文网首页
20. 过渡动画

20. 过渡动画

作者: 论宅 | 来源:发表于2019-06-03 15:11 被阅读0次

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
包括以下工具:

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

单元素,组件的过渡

vue提供了【transition】的封装组件,在下列情况中可以使用——

  • 条件渲染(v-if)
  • 条件展示(v-show)
  • 动态组件
  • 组件根节点

如:

<div class="app">
      <div @click="clickMethods">点我</div>
      <div v-show="showEle">显示</div>
      <transition name="fade">
        <div v-show="showEle">显示</div>
      </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      var vm = new Vue({
        el: ".app",
        data: {
          showEle: true
        },
        methods: {
          clickMethods: function() {
            this.showEle = !this.showEle;
          }
        }
      });
    </script>

在处理transition的时候,vue会进行三组操作:

  1. 嗅探元素是否应用了css过渡或者动画。如果是,会在需要的时候切换这些类名。
  2. 如果过渡组件提供了【钩子函数】,那么函数也会在需要的时候加载
  3. 如果上述都没有检测到,dom操作会立即执行,直接变成最终形态。

一个transition组件需要在组件上绑定一个name,如fade,配套的css,如fade-enter, .fade-leave-to,当然fade能一键替换的,或者钩子函数。

过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

css动画

css过渡和css动画不同,css过渡是设定好终点,vue补间过程,而css动画则是用keyframe书写css动画——

 .fade2-enter-active{
        animation: fade2-in .5s;
      }
      .fade2-leave-active{
        animation:  fade2-in .5s reverse;
      }
      @keyframes fade2-in{
        0%{opacity: 0;transform: scale(3)}

        100% {opacity: 1;transform: scale(1)}
      }

<div @click="clickMethods2">点我2</div>
      <transition name="fade2">
        <div v-show="showEle2" style="transform-origin: 0 0">显示</div>
      </transition>

自定义过渡类名

这些个类名可以当做属性去修改覆盖:
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class

在我们需要整合第三方动画库的时候,将第三方的类名覆盖上去,即可直接调用第三方的动画库:

 <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

同时使用过渡和动画

两种方式自然可以同时使用,互不影响。而vue监听的时候需要注意一些细节。

显性的过渡时间

我们还可以定制动画时间:

<transition :duration="1000">...</transition>
// 或者定制进入和移出时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

这些定制不会改变进场动画,而是改变后续的持续动画。

javaScript钩子

可以再属性中声名JavaScript钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

各个方法会在methods中定义并在设定的动画执行的时候触发。

如果仅用js过渡元素的话,推荐

v-bind:css="false"

属性,这会使vue跳过检测css动画,提高性能和避免影响。

初始渲染的过渡

和上面的反复显影就会反复出现的过渡不同,初始渲染的过渡只会出现一次。
虽说可以设定的状态有不少,但是貌似只有【appear-to-class】起作用。

<transition name="fade3" appear appear-to-class="bclass" appear-class="aclass" appear-active-class="cclass">
      <div v-show="showEle" style="transform-origin: 0 0">显示</div>
    </transition>

另外,这个和fade一样,也有js钩子:

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

多个元素的过渡

你可以将一组切换的元素放在transition里面,里面的元素的显隐切换都会调用transition规定的动画。
另外

切换的元素必须带上key,否则动画切换失效

.my-div {
        position: relative;
    }

    .btn {
        position: absolute;
        left: 30px;
        top: 10px;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }



 <transition name="fade">
            <!-- <button class="btn" :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button> -->
            <button key="on" v-if="show" class="btn" @click="show = !show">on</button>
            <button key="off" v-else="show" class="btn" @click="show = !show">off</button>
        </transition>


如此,就可以将元素动态切换了,注意的是元素在切换的过程中可能两个元素同时出现,解决方法就是下面的。

过渡模式

元素有两种过渡模式,防止切换的元素同时存在造成的定位问题:
in-out:新元素先进行过渡,完成之后当前元素过渡离开。

out-in:当前元素先进行过渡,完成之后新元素过渡进入

<transition name="fade" mode="out-in">
            <component :is="componentName"></component>
        </transition>

在transition中使用mode后,可以看到两个元素不在同时存在。

多个组件过渡

组件比元素更为简单,使用好is就足够了,也不需要key

<transition name="fade" mode="out-in">
            <component :is="componentName"></component>
        </transition>

列表的进入、离开过渡

我们已经可以使用单个节点的元素切换,那么,如何渲染一个列表,例如让列表中的元素变更的时候动态插入与消失?
这时候,我们使用的便是transition-group组件。
该组件有三个特性

  1. 和transition不同,transition解析出来是一个真是的span元素,你可以通过tag特性更变为其他元素
  2. 过渡模式不可用,因为这不是对元素进行切换
  3. 内部的元素【总是需要一个唯一的key值】

列表的进入离开过渡

需要引入插件。。。

动态过渡

过渡可以在过程中修改数据哦。
因为动画的每一个阶段都带有钩子,所以每一个阶段你都可以获取到事件,并更换参数。

相关文章

  • 20. 过渡动画

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中...

  • JS中的动画事件和过渡事件

    动画事件 动画事件demo 过渡动画事件 过渡动画事件demo

  • CSS3过渡动画

    过渡动画 transition属性简介transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!列...

  • 过渡与动画

    @(HTML5)[过渡, 动画] [TOC] 五、过渡与动画 过渡 transition-property:过渡属...

  • 动画core animation

    type 动画过渡类型subtype 动画过渡方向

  • Android过渡动画Scene and Transition(

    Android场景过渡——Scene and Transition(一) 场景过渡动画 场景过渡动画是指以动画的形...

  • 016 过渡及动画

    过渡与动画 一、过渡 1、过渡属性 二、动画 1、动画属性 2、动画体 v_hint:动画属性设置给指定选择器标签...

  • CSS3--动画

    特点 过渡和动画之间的相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • web前端-CSS3动画

    动画和过渡的异同 相同点过渡和动画都是给元素添加动画的过渡和动画都是CSS3新增的属性过渡和动画都需要满足三要素才...

网友评论

      本文标题:20. 过渡动画

      本文链接:https://www.haomeiwen.com/subject/rjmcxctx.html