【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现

news2024/9/20 6:27:42

一. 问题描述

想做一个文字透明度从1到0然后再从0到1的css动画。

二. 代码写法

2.1 animation写法

2.1.1 animation属性key

在这里插入图片描述

2.1.2 代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        #root h2{
            animation: mymove 2s infinite;
        }
        @keyframes mymove{
            0%{ opacity: 1;}
            50%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}"> Welcome to Carling's world!</h2>
    </div>
</body>
<script type="text/javascript">

</script>
</html>

2.2 vue代码展示

2.2.1 vue无生命周期实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}"> Welcome to Carling's world!</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.devtools = false;
    //改变标题透明度
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1
        }
    });
    var flag = 1;
    setInterval(()=>{
        
        if(flag == 1){
            vm.opacity -= 0.01;
        }else{
            vm.opacity += 0.01;
        }
        
        if(vm.opacity <= 0){
            flag = -1;
        }
        else if(vm.opacity >= 1){
            flag = 1;
        }   
    },16);
</script>
</html>

2.2.1 vue生命周期实现

2.2.1.1 生命周期方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}"> Welcome to Carling's world!</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.devtools = false;
    //改变标题透明度
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
            flag:1
        },
        created(){
            this.change()
        },
        methods:{
            change(){
                setInterval(()=>{
                    if(this.flag == 1){
                        this.opacity -= 0.01;
                    }else{
                        this.opacity += 0.01;
                    }
                    
                    if(this.opacity <= 0){
                        this.flag = -1;
                    }
                    else if(this.opacity >= 1){
                        this.flag = 1;
                    }   
                },16);
            },
        }
    });
</script>
</html>