动画2——自定义过渡类名前缀（v-）

作者: 小丘啦啦啦 | 来源:发表于2019-04-18 09:55 被阅读0次

12.vue动画
动画2——自定义过渡类名前缀（v-）
vue自定义transition样式前缀名
vue笔记-10（动画自定义v-前缀）
Vue 动画
vue.js入门之第七篇(动画)
2020-02-11
vue中动画的实现的几种方式
过渡
JS第七天-02

一、说明
单纯的transition内的元素动画效果会公用一套过渡类（即v-开头的6种过渡类），有时候需要不同元素实现不同的动画效果，则需要自定义修改v-前缀形成不同元素的各自过渡类。
二、自定义v-前缀

给transition加一个name属性，自定义值。
则形成了新的过渡类，以自定义name的值为前缀，适用于此类transition内容。

三、实例
点击两个按钮可以实现不同完整动画效果。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
         <style>
             /* 公共的过渡类，v-开头 */
            .v-enter,.v-leave-to{
                opacity:0;
                transform: translate(100px);
            }
            .v-enter-active, 
            .v-leave-active{   
                transition : all 0.4s ease;   
            }
            /* 自定义的过渡类，transition的name值开头 */
            .my-enter,.my-leave-to{   /* 动画进入前和离开后的元素状态 */
                opacity:0;
                transform: translateY(100px);
            }
            .my-enter-active,   /* 入场和离场动画时间段 */
            .my-leave-active{   
                /* 设置时间,那些元素实现动画变化等的过渡 */
                transition : all 1s ease;   
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="button" value="转化1" @click="flag1 = !flag1"/>
            <input type="button" value="转化2" @click="flag2 = !flag2"/>
            <transition>
                <h3 v-if="flag1">我是一句话</h3>
            </transition>
            <transition name="my">
                <h3 v-if="flag2">我是一句话</h3>
            </transition>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    flag1:false,
                    flag2:false,
                }
            });
        </script>
    </body>
</html>

不同transition内容实现不同动画效果。