动态样式绑定 定时器

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);
    }
}