【Vue教程十】过渡 和 动画

一、使用过渡类名：

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

   
动画哦

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属性）的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

 

二、使用第三方CSS动画库

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

step1：下载 animate.css 并引用：

step2：定义 transition 及属性：

    
动画哦

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

 

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

step1： 定义 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循环的列表包裹起来：

    
    
    
    
        
{{item.id}}----{{item.name}}
    

列表的排序过渡

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

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