当前位置：首页 > news >正文

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

news 2025/7/5 13:17:54

一. 问题描述

想做一个文字透明度从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>