vue动画心得 - HelloWorld开发者社区

最近学习到vue的动画，觉得挺有意思,写了一个小demo，话不多说，上代码~

<template>
    <div id="example">
        <p class="toggle" @click="show=!show">{{show?'移出':'移入'}}</p>
        <transition
            name="fade">
            <div v-if="show" class="showBox">
                <h2>主标题是我</h2>
                <ul>
                    <li>我是标题标题标题标题标题1</li>
                    <li>我是标题标题标题标题标题1</li>
                    <li>我是标题标题标题标题标题1</li>
                    <li>我是标题标题标题标题标题1</li>
                    <li>我是标题标题标题标题标题1</li>
                </ul>
            </div>
        </transition>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                // 赋值显示下面内容
                show:true,
            }
        },
    }
</script>
<style>
    #example{
        width:300px;
        margin:0 auto;
    }
    .toggle{
        padding:10px 10px;
        background:green;
        color:#EFEFEF;
        cursor:pointer;
        font-size:16px;
        margin-bottom:20px;
    }
    .showBox{
        padding:10px 0;
        border:1px dashed #008000;
    }
    .fade-enter{
        opacity: 0;
        transform: translateX(50px);
    }
    .fade-leave-to{
        opacity: 0;
        transform: translateX(-50px);
    }
    .fade-enter-active,.fade-leave-active{
        color:#eee;
        transition:all 0.8s;
    }
</style>

效果：
点击移出按钮，列表块往左移动，同时渐渐消失，点击移入按钮，代码块由右往左移动，同时渐渐显示。

笔者还不会上传动态图片，看看截图吧 ~…~

vue动画心得

实现思路：
1.通过show的true和false控制列表是否显示。
2.使用<transition>封装好的组件，给元素添加进入和离开的过渡效果。
实现原理：我在动画插入的初始状态前，把列表透明度调整成0，同时让他向右平移了50px。因为，<transition>的过渡效果在动画完成后，会移除class，回到最初的效果。我点击触发动画的时候，给过渡效果添加了动画的时长（动画曲线之类）。就相当于，慢慢的从translateX(50px)和opacity:1回到最初的状态translateX(0px)和opacity:1。同理，移除的动画就是向左平移50px，透明度为0，给移除的过渡效果添加动画时长。就实现了向左渐渐消失的效果。

很简单吧？好吧，例子就很简单~，那重点来了，咱们去复习下vue的动画吧。

关于过渡的类名(.class)：

我画了一个类名过渡状态的泳道图，看这儿~

vue动画心得

怎么样~，有点花是不~，嗯...,我喜欢胡里花哨的东西...

总的来说：

v-enter  元素被插入前生效。下一帧移除
v-enter-active 元素被插入前 ~ 过渡/动画完成后。 动画完成后，被移除。
v-enter-to  元素被插入后 ~ 过渡/动画完成后。 动画完成后，被移除。
v-leave  离开过渡被触发即生效。下一帧被移除
v-leave-active  离开过渡被触发即生效 ~ 在过渡/动画完成之后。 动画完成后，被移除。
v-leave-to  在离开过渡被触发之后下一帧 ~ 过渡/动画完成之后。 动画完成后，被移除。

<transition> 组件会有默认的v-前缀，如果使用了<transition name="name">，则，v-enter会替换成了 name-enter。

有同学，看到这里就会想，可以在上面.class中写transform，那么是否能写animation呢？
当然~，当然区别还是有的。官方给出的答案：css动画用法同css过渡，区别是在动画中v-enter类名在节点插入dom后不会立刻删除，而是在animationend事件触发时删除。

好吧，该下班了~，今天先到这吧~

有没有同学，看到.class,想到了attribute属性自定过渡类名，javascript钩子函数在function写动画，多个组件过渡，列表过渡... 附上vue官网网址：https://cn.vuejs.org/v2/guide...。

再次感谢这个开源时代！给我们提供如此清晰的官方文档~