vue-transition动画分分快三计划

作者:分分快三计划

二、自定义过度类名

默认的.fade-enter变成.fade-in-enter;

默认的.fade-enter-active变成.fade-in-active;

默认的.fade-leave变成.fade-out-enter;

默认的.fade-leave-active变成.fade-out-active;

<transition 
    name="fade"
    enter-class="fade-in-enter"
    enter-active-class="fade-in-active"
    leave-class="fade-out-enter"
    leave-active-class="fade-out-active"
  >
    <p v-show="show">hello</p>
</transition>

.fade-in-active, .fade-out-active{
    transition: all 0.5s ease 
} 
.fade-in-enter, .fade-out-active{
     opacity: 0 
}

五、多个元素运动

<!-- key一般是循环遍历出来的 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" :key=""></p>
      <p v-show="show" :key=""></p>
</transition-group>

 

  • 也可以自定义类名enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class,使用现有的动画库如 Animate.css。他们的优先级高于普通的类名

一、transition使用

<transition name="fade">
    运动东西(元素,属性、路由....)
</transition>

class定义:

.fade-enter{ } 进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)

.fade-enter-active{ } 进入过渡的结束状态,元素被插入时就生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

.fade-leave{ } 离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

.fade-leave-active{ } 离开过渡的结束状态,元素被删除时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

 

分分快三计划 1

 

当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:

vue-transition动画

官网API:

demo点击显示与消失

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>
  • 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 name-entername--enter-active等CSS 类名。
  • 如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
  • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和Vue的 nextTick 概念不同)

三、transition相关函数

<transition name="fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
>
    <p v-show="show"></p>
</transition>

methods:{
    beforeEnter(el){
        console.log('动画enter之前');
    },
    enter(el){
        console.log('动画enter进入');
    },
    afterEnter(el){
        console.log('动画进入之后');
        el.style.background="blue";
    },
    beforeLeave(el){
        console.log('动画leave之前');
    },
    leave(el){
        console.log('动画leave');
    },
    afterLeave(el){
        console.log('动画leave之后');
        el.style.background="red";
    }
}

 

  1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
  2. v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时 v-enter 被删除),在 transition/animation 完成之后移除。
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
  5. v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效(于此同时 v-leave 被删除),在 transition/animation 完成之后移除。

四、transition结合animate.css使用。

<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
        <p v-show="show" class="animated"></p>
</transition>
或者
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
        <p v-show="show"></p>
</transition>

Vue 提供了 transition 的封装组件,可以给任何包裹在其内的元素和组件添加 entering/leaving 过渡。

<template>
    <div id="demo">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>
<script>
export default {
        el: '#demo',
        data: {
            show: true
        }
}
</script>
<style>
.fade-enter-active,.fade-leave-active {
    transition: opacity .5s
}
.fade-enter,.fade-leave-to {
    opacity: 0
}
</style>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show">
      Toggle render
  </button>
  <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
      <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
    el: '#example-3',
    data: {
        show: true
    }
})

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 Vue