vue 动画 过渡效果 「transition」 封装

vue 提倡数据驱动  不宜操作 dom元素

要完成显示隐藏的过度动画 可以用 官方的<transition>

文章后面再说 官方的<transition>组件

先来看看我自己想到的 过度动画方案  与 理解

动态绑定 class 类名 通过 改变v-if/v-show 的布尔值的时候  动态改变class绑定的类名称

例如 (lang="ts")

<div >
  <div :class="aniClass"  v-if="show" >
    <div class="btn-box" @click="changeShow">
    </div>
  </div>
</div>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({
  components: {
  
  },
})
export default class ani extends Vue {
aniClass=""
show=true
changeShow(){
  this.aniClass = 'updown-leave-active'  预先定义好的含有动画的类名
  setTimeout(()=>{this.show=!this.show},2000) 时间要与动画的持续时间一致
 } 
}
</script>
<style scoped lang="scss">
  /*上下*/

  .updown-enter-active{
    animation: updown-up 2s;

  }

  .updown-leave-active{

    animation: updown-down 2s;
  }
@keyframes updown-up {
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0);
  }
}
@keyframes updown-down {
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(100%);
  }
}
}
</style>

 

上述例子，只是适用于简单页面的渐变解决方案，不适用于实际开发，跟着官方脚步走还是用<transition> 较为规范

https://cn.vuejs.org/v2/guide/transitions.html

官方的这样一句话表示 ，需要在特定情况下才能达到过渡效果 

v-if 与 v-show  表示 元素的出现与消失，而渐变动画的引入就是 规定他 如何出现 与如何消失  例如（滑动，渐隐，放大.....） 

 

官网的例子已经很为详细，主要的思路就是 为 元素动态增加类名

有了官方的例子  我们也可以 做一定程度的封装 例如：

<template>
    <transition :name="activeName">
        <slot v-if="value"></slot>
    </transition>
</template>

<script>
    export default {
        name: "index",
        props:{
            value:{
                type:Boolean,
                default:true
            },
            activeName:{
                type:String,
                default: 'fadeyc'
            }
        }
    }
</script>

<style scoped lang="scss">
    .fadeyc-enter {
        transform: translateX(150%);
    }

    .fadeyc-enter-active {
        transition: all 1.5s;
        animation: leftToRight 1.5s;
    }

    .fadeyc-enter-to {
        transform: translateX(0);
    }

    .fadeyc-leave {

    }

    .fadeyc-leave-active {
        transition: all 1.5s;
        animation: leftToRightRight 1.5s;
    }

    .fadeyc-leave-to {
        transform: translateX(-150%);
    }

    


    /*缩放应用*/
    .scale-enter-active{
        animation: bounce-in 1.5s;
    }

    .scale-leave-active{
        animation: bounce-out 1.5s;
    }
    /*缩放*/
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(0.5);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(0);
        }
    }


    /*左右滑动*/
    .rightTo-enter-active {
        animation: leftToRight 1.5s;
    }
    .rightTo-leave-active{
        animation: leftToRightRight 1.5s;
    }
    @keyframes leftToRight {
        0%{
            transform: translateX(150%);
        }
        100%{
            transform: translateX(0);
        }
    }
    @keyframes rightToLeft {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-150%);
        }
    }
    @keyframes leftToRightRight {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(150%);
        }
    }
    /*渐隐*/
    .opacity-enter-active {
        animation: opacity-in 3s;
    }
    .opacity-leave-active{
        animation: opacity-out 2.5s;
    }
    @keyframes opacity-in {
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes opacity-out {
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }

    /*上下*/

    .updown-enter-active{
        animation: updown-up 1s;

    }

    .updown-leave-active{

        animation: updown-down 1s;
    }
    @keyframes updown-up {
        0%{
            transform: translateY(100%);
        }
        100%{
            transform: translateY(0);
        }

    }

    @keyframes updown-down {
        0%{
            transform: translateY(0);
        }
        100%{
            transform: translateY(100%);
        }

    }
</style>

 

调用：

<transitionBox active-name="updown">
  <div v-if="show">666</div>
</transitionBox>

或者

<transitionBox active-name="updown" v-model="show">
  <div>666</div>
</transitionBox>

 

项目中可能会用到很多的动画效果，封装 过后 我们要用的过度动画 就可以集中管理起来 ，后期维护 有很大便利 动画效果就在这一个.vue里面就可以管理。