vue动画过渡

动画和过渡

过渡

transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
transform: translateX(10px);
  opacity: 0;
复制代码

动画

animation: bounce-in .5s reverse;

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
复制代码

我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
复制代码

他们的优先级高于普通的类名

同一个元素同时使用过渡和动画需要指定type来确定谁先谁后

延迟过渡时间

<transition :duration="1000">...</transition>
复制代码

你也可以定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>
复制代码

js钩子

<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>
复制代码

v-bind:css="false" vue跳过css检测

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡，完成之后新元素过渡进入。  常用
复制代码

动态组件

:is="view"
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})
复制代码

多个元素过渡

就是在v-if v-else-if 或者 switch 多个组件过渡

就是在动态组件外用过渡

列表过渡

<transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
      {{ item }}
    </span>
  </transition-group>
复制代码

this.items =

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

可复用的过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 或者 作为根组件，然后将任何子组件放置在其中就可以了。