【Vue学习笔记】vue实现呼吸灯效果

一.代码

<!-- 呼吸效果 -->
    <div class="root">
        <h2 :style="{opacity}">呼吸效果
        </h2>
    </div>

const vm = new Vue({
    
    
            el: '.root',
            data() {
    
    
                return {
    
    
                    opacity: 1
                }
            },
            mounted() {
    
    
                this.change()
            },
            methods: {
    
    
                change() {
    
    
                    setInterval(() => {
    
    
                        vm.opacity -= 0.01   //透明度减0.01
                        if (vm.opacity <= 0) vm.opacity = 1  //当透明度为0就重新设为1
                    }, 16);
                }
            },
        })

二.效果

这里文字透明度是渐变的，只是截图显示的当前状态