【Vue教程十】过渡 和 动画

一、使用过渡类名：

step1：将需要实现动画的元素用<transition>标签包起来：

<transition name="fade">
   <div v-show="isshow">动画哦</div>
</transition>

step2：定义一组过渡样式：

上图可以看出，v-enter 和 v-leave-to 样式是一样的，v-enter-active 和v-leave-active 定义的是动画持续时间等。

/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(150px)
}

/* 定义进入和离开时候的过渡状态 */
.v-enter-active,
.v-leave-active {
    transition: all .5s ease;
}

如果你使用一个没有名字（没有name属性）的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

 

二、使用第三方CSS动画库

第三方效果链接：https://daneden.github.io/animate.css/

step1：下载 animate.css 并引用：

<link rel="stylesheet" href="./css/animate.css" />

step2：定义 transition 及属性：

<transition
    enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
    <div class="animated" v-show="isshow">动画哦</div>
</transition>

注：class中需要加animated，不然动画没效果；fadeInRight 和 fadeOutRight 是动画库中的样式效果，直接拿就好。

 

三、使用动画钩子函数，可实现半场动画

step1： 定义 transition 组件以及三个钩子函数

<transition 
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
</transition>

step2：定义三个 methods 钩子方法：

methods: {
    beforeEnter(el) {
        el.style.transform = "translate(0,0)"
    },
    // done,也就是afterEnter这个函数的引用
    enter(el, done) {
        el.offsetWidth
        el.style.transform = "translate(150px,450px)"
        el.style.transition = 'all 1s ease';
        done();
    },
    afterEnter(el) {
        console.log("ok")
        this.flag = false;//隐藏小球
    },
}

 

四、列表过渡

step1：定义一组过渡样式

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateY(150px)
}

.v-enter-active,
.v-leave-active {
    transition: all .5s ease;
}

step2：定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<!-- <ul> -->
    <!-- 如果要为v-for创建的元素设置动画，必须设置key，不能使用transition，要用transition-group -->
    <!-- 添加appear，是为了添加入场动画效果 -->
    <!-- 通过设置tag属性，渲染为指定的元素，不设置的话，默认是span标签 -->
    <transition-group appear tag='ul'>
        <li v-for='item in items' :key='item.id' @click='del(item.id)'>{{item.id}}----{{item.name}}</li>
    </transition-group>
<!-- </ul> -->

列表的排序过渡

`v-move` 和 `v-leave-active` 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}