1

CSS トランジション プロパティを使用して、3 秒間隔で幅を 0 ～ 100 に増やしたい div があります。Chrome 開発者ツールでこのプロパティを変更すると、3 秒間で 0 から 100 まで大きくなります。ただし、コンポーネントの からスタイルを適用すると、ngOnInit()すぐに適用されます。私は何か間違ったことをしていますか？

編集:私は自分で問題を解決しましたが、それが機能する理由も説明する答えは素晴らしいでしょう.

Component.ts:

@Component({
    selector: 'notFound',
    templateUrl: 'app/notFound.component/notFound.component.html',
    directives: [ROUTER_DIRECTIVES]
})

export class NotFoundComponent {
    ngOnInit() {
        (<HTMLElement>document.querySelector('.determinate')).style.width = "100%";
    }
}

Component.html:

<div class="wrapper">
    <i class="material-icons error">error_outline</i>
    <div class="not-found-text"> No such page 'round here.</div>
    <a [routerLink]="['Menu']" class="waves-effect waves-light btn blue">
        <i class="material-icons">home</i>
        <!--home-->
    </a>
    <div class="progress">
        <div class="determinate"></div>
    </div>
</div>

<style>
    .progress {
        margin-top: 30px;
        background: white;
    }

    .determinate {
        width: 0%;
        background: #2196F3;
        transition: width 3s ease-in-out;
    }        
</style>
4

1 に答える 1

2

呼び出しを 0ms でラップすることで解決しましたsetTimeout。なんて驚きだ。

ngOnInit() {
    setTimeout(function () {
        (<HTMLElement>document.querySelector('.determinate')).style.width = "100%";
    }, 0);
}
于 2016-08-29T20:36:49.033 に答える