动态样式绑定定时器

最新推荐文章于 2023-03-21 17:30:39 发布

转载最新推荐文章于 2023-03-21 17:30:39 发布 · 372 阅读

文章标签：

#动态样式绑定定时器

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular实现的简单透明度动画案例。该案例通过定时器更改元素的透明度值来实现循环渐显渐隐效果，并展示了如何在组件中利用ngStyle指令结合定时器API实现这一目标。

demo.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'demo10',
    template:`
        <h1 [ngStyle]="{opacity:myOpacityValue}">精彩</h1>
    `
})

export class Demo10Component implements OnInit {
    myOpacityValue=0;
    myTimer:any=null;
    constructor() { }

    ngOnInit() {
        this.myTimer=setInterval(()=>{
            this.myOpacityValue+=0.1;
            //console.log(this.myOpacityValue);
            if(this.myOpacityValue>1){  //必须大于1，因为js在1处有误差，不准确
                this.myOpacityValue=0;
            }
        },500);
    }

    ngOnDestroy() {
        this.myTimer=null;
        clearInterval(this.myTimer);
    }
}