vue——29-动画-过度类名实现动画 和 修改 v- 前缀

版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83049883

过度类名实现动画

1、使用 transition 元素,把需要被动画控制的元素,包裹起来
body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 1、使用 transition 元素,把需要被动画控制的元素,包裹起来-->
    <!-- transition 元素,是 Vue 官方提供的-->
    <transition>
        <h3 v-if="flag">这是一个H3</h3>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    }
</script>

2、自定义两组样式,来控制 transition 内部的元素实现动画
css

    <style>
  	    /* 2、自定义两组样式,来控制 transition 内部的元素实现动画*/
        /* 必须 v- 前缀*/
        /* v-enter 【这是一个时间点】是进入之前,元素其实状态,此时还没有开始进入*/
        /* v-leave-to 【这是一个时间点】是动画离开之后,离开的终止状态,此时,元素动画结束了*/

        .v-enter, .v-leave-to {
        /* 横向淡入淡出动画*/
            opacity: 0;
            transform:translateX(150px);
        }

        /* v-enter-active 【入场动画的时间段】*/
        /* v-leave-active 【离场动画的时间段】*/

        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }
    </style>

修改 v- 前缀

  • 修改transition中的name属性值,之后css中引用前缀就变为 name属性值-
  • 这个作用主要是一个页面,不同组件有不同动画时,用于区分动画

1、使用 transition 元素,把需要被动画控制的元素,包裹起来
body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 1、使用 transition 元素,把需要被动画控制的元素,包裹起来-->
    <!-- transition 元素,是 Vue 官方提供的-->
    <transition name="my">
        <h3 v-if="flag">这是一个H3</h3>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    }
</script>

2、自定义两组样式,来控制 transition 内部的元素实现动画
css

    <style>
  	    /* 2、自定义两组样式,来控制 transition 内部的元素实现动画*/
        /* 必须 my- 前缀*/
        /* my-enter 【这是一个时间点】是进入之前,元素其实状态,此时还没有开始进入*/
        /* my-leave-to 【这是一个时间点】是动画离开之后,离开的终止状态,此时,元素动画结束了*/

        .my-enter, .my-leave-to {
            /* 横向淡入淡出动画*/
            opacity: 0;
            transform:translateX(150px);
        }

        /* my-enter-active 【入场动画的时间段】*/
        /* my-leave-active 【离场动画的时间段】*/

        .my-enter-active, .my-leave-active {
            transition: all 1s ease;
        }
    </style>

没有更多推荐了,返回首页