Vue2.0动画(1)

最新推荐文章于 2023-05-04 18:09:23 发布

今天也在努力学

最新推荐文章于 2023-05-04 18:09:23 发布

阅读量196

点赞数

分类专栏： vue 文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_62927182/article/details/125220285

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01-过渡

vue提供了一个过渡动画的标签transition,只能对一个元素有效,主要是给v-if或者v-show动态组件等在切换的时候添加过渡效果

<style>
    /* 添加过渡效果 */
    /* 元素显示/入场的时候 */
    .v-enter {
        /* 元素在入场开始时的样式 */
        /* opacity: 0; */
        height: 0;
    }    
    .v-enter-active {
        /* 元素在入场进行时的样式  过渡的时间*/
        transition: all 0.7s linear;
    }    
    .v-enter-to {
        /* 元素在入场结束时的样式 */
        /* opacity: 1; */
        height: 200px;
    }
    /* 元素隐藏/离场的时候 */
    .v-leave {
        /* 元素在隐藏的开始时候 */
        /* opacity: 1; */
        height: 200px;
    }
    .v-leave-active {
        transition: all .7s;
    }    
    .v-leave-to {
        /* 元素在隐藏结束的时候 */
        /* opacity: 0; */
        height: 0;
    }    
    div#d1 {
        width: 200px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <!-- vue提供了一个过渡动画的标签transition,只能对一个元素有效,主要是给v-if或者v-show动态组件等在切换的时候添加过渡效果 -->
        <transition>
            <div id="d1" v-show="show">淡入淡出</div>
        </transition>
        <button @click="change">切换</button>
    </div>
</body>
<script src="../../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        },
        methods: {
            change() {
                this.show = !this.show
            }
        },
    })
</script>

02-关键帧动画

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }    
    @keyframes leaveAnimation {
        0% {
            transform: translate(0, 0) rotate(0deg);
        }
        50% {
            transform: translate(0, 0) rotate(-90deg);
        }
        100% {
            transform: translate(-100px, 0) rotate(-90deg);
        }
    }    
    .leaveAni {
        animation: leaveAnimation 2s linear;
    }    
    @keyframes enterAnimation {
        0% {
            transform: translate(-100px, 0) rotate(-90deg);
        }
        50% {
            transform: translate(0, 0) rotate(-90deg);
        }
        100% {
            transform: translate(0, 0) rotate(0deg);
        }
    }    
    .enterAni {
        animation: enterAnimation 2s linear;
    }
</style>
<body>
    <div id="app">
        <input type="checkbox" v-model="show">
        <transition enter-active-class="enterAni" leave-active-class="leaveAni">
            <!-- 元素入场的时候动画的类 -->
            <div v-show="show" class="d1"></div>
        </transition>
    </div>
</body>
<script src=".././../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
</script>

03-vue中的js动画

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    @keyframes leaveAnimation {
        0% {
            transform: translate(0, 0) rotate(0deg);
        }
        50% {
            transform: translate(0, 0) rotate(-90deg);
        }
        100% {
            transform: translate(-100px, 0) rotate(-90deg);
        }
    }    
    .leaveAni {
        animation: leaveAnimation 2s linear;
    }    
    @keyframes enterAnimation {
        0% {
            transform: translate(-100px, 0) rotate(-90deg);
        }
        50% {
            transform: translate(0, 0) rotate(-90deg);
        }
        100% {
            transform: translate(0, 0) rotate(0deg);
        }
    }
    .enterAni {
        animation: enterAnimation 2s linear;
    }
</style>

<body>
    <div id="app">
        <input type="checkbox" v-model="show">
        <!--  
            @befor-enter 元素进入前/显示前的钩子函数
            @enter 在元素显示进行时触发的钩子函数
            @before-leave 元素隐藏之前的钩子函数
            @leave 元素离场进行时触发
        -->
        <transition @before-enter="showBefore" @enter="enter" @before-leave="hideBefore" @leave="leave">
            <!-- 元素入场的时候动画的类 -->
            <div v-show="show" class="d1"></div>
        </transition>
    </div>
</body>
<script src=".././../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        },
        methods: {
            showBefore(el) {
                //el是要做动画的元素
                //设置显示之前的样式
                el.style.opacity = 0
            },
            enter(el, done) {
                //done 是一个函数,当一个动画结束的时候,需要手动调用done函数 保证动画截止
                function update() {
                    el.style.opacity = el.style.opacity * 1 + 0.024
                    if (el.style.opacity * 1 < 1) {
                        requestAnimationFrame(update)
                    } else {
                        done() //终止动画
                    }
                }
                update()
            },
            hideBefore(el) {
                el.style.opacity = 1
            },
            leave(el, done) {
                function update() {
                    el.style.opacity = el.style.opacity * 1 - 0.021
                    if (el.style.opacity > 0) {
                        requestAnimationFrame(update)
                    } else {
                        done()
                    }
                }
                update()
            }
        },
    })
</script>