vue 中动画的实现方式

动画

fade-enter
fade-enter-active
fade-enter-to
fade-leave
fade-leave-active
fade-leave-to

使用 animate.css 库：

<style>
    .active {}
    .leave {}
</style>
// 一下类名 替换为 animate 里面的类名就可以了
<transition name="fade" enter-active-class="active" leave-active-class="leave" appear appear-active-class="active"></transition>
<transition :duration="10000" type="transition" name="fade" enter-active-class="animated swing fade-enter-active" leave-active-class="animated swing fade-leave-active" appear appear-active-class="animated swing" @before-enter="handleBeforeEnter">
    <div v-if="show">
        123
    </div>
</transition>
// appear-active-class 功能是让页面刚进入时也有进入动画
// type="transition" 表示以 过渡的时长为准
// duration 自己定义动画时长
<script>
    handleBeforeEnter(el) {
        el.style.color="red"
    }
</script>

// 过渡和css3的@keyframes 结合，添加一下类
.fade-enter-active, .fade-leave-active
  transition: opacity .5s
.fade-enter, .fade-leave-to
  opacity: 0

使用 JS 动画与 Velocity.js 结合

github 查找库，看使用方法

多个元素或组件过渡：

<style>
    .v-enter, v-leave-to {}
    .v-enter-active, v-leave-active {}
</style>
// mode="in-out" or in-out
<transition mode="in-out">
    <div v-if="show" :key="hello">
        hello
    </div>
    <div v-else key="bye">
        bye bye
    </div>
</transition>

<transition mode="in-out">
    <component is="xxxx"></component>
</transition>

列表过渡动画：

<style>
    .v-enter, v-leave-to {}
    .v-enter-active, v-leave-active {}
</style>
<transition-group>
    <div v-for="item in list">
        {{item.title}}
    </div>
</transition-group>

vue 动画封装：

<script>
    Vue.component('fade', {
        props: ['show'],
        template: `
            <transition @before-enter="handleBeforeEnter"><slot v-if="show"></transition>
        `,
        methods: {
            handleBeforeEnter: function(el) {
                el.style.color: 'red'
            },
            handleEnter: function(el, done) {
                setTimeout(() => {
                    el.style.color = 'green'
                    done()
                }, 2000)
            }
        }
    })
</script>

官网查阅动态过渡、状态过渡等更复杂的动画。

amenzai / myDiary

vue 中动画的实现方式 #73

动画