美文网首页
动画2——自定义过渡类名前缀(v-)

动画2——自定义过渡类名前缀(v-)

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

一、说明
单纯的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内容实现不同动画效果。

相关文章

  • 12.vue动画

    1.不使用动画的情况: 2.使用vue动画 使用过渡类名实现动画 自定义v-前缀: 使用第三方类实现动画: 3.例...

  • 动画2——自定义过渡类名前缀(v-)

    一、说明单纯的transition内的元素动画效果会公用一套过渡类(即v-开头的6种过渡类),有时候需要不同元素实...

  • vue自定义transition样式前缀名

    默认情况下,控制 transition 样式的类名是以 'v-' 为前缀,我们可以自定义前缀名 具体代码 代码解析...

  • vue笔记-10(动画自定义v-前缀)

    动画自定义v-前缀 定义tansition的name属性为my 代码演示

  • Vue 动画

    简单动画 transition动画过渡原理 引用animate.css 库 使用自定义的 类名,将 transit...

  • vue.js入门之第七篇(动画)

    当插入、更新、移除 DOM元素时 使用过渡动画效果 示例1(有name) 自定义 过渡的类名(css文件中) 示例...

  • 2020-02-11

    vue动画 同时可以在transition上面添加name 在自定义动画对于这些在过渡中切换的类名来说,如果你使用...

  • vue中动画的实现的几种方式

    方式一:css动画 过渡的类名过渡的类名在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义...

  • 过渡

    使用方法 有 6 种 class 类名会在进入/离开(enter/leave)过渡中处理 自定义过渡class类名...

  • JS第七天-02

    JS动画 一、JS结合CSS实现动画 1、通过事件修改指定的样式,形成过渡的第二状态 2、通过事件修改指定的类名,...

网友评论

      本文标题:动画2——自定义过渡类名前缀(v-)

      本文链接:https://www.haomeiwen.com/subject/yzanwqtx.html