ngOnInit은 CSS 전환을 무시합니다.

CSS 전환 속성을 사용하여 3s 간격으로 0 - 100에서 폭을 늘리려는 div가 있습니다. Chrome 개발자 도구에서이 속성을 변경하면 3 초 동안 0-100까지 멋지게 커집니다. 그러나 구성 요소의 ngOnInit()에서 스타일을 적용하면 즉석입니다. 내가 뭔가 잘못하고 있는거야?ngOnInit은 CSS 전환을 무시합니다.

편집 : 문제를 직접 해결했지만 문제의 원인을 설명하는 답변도 좋습니다.

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>

출처

2016-08-29 iuliu.net

저는 Lifecycle Hooks에 대한 Angular 2 Docs를 살펴보아야한다고 생각합니다. OnInit은 OnChanges 직후에 한 번 발생합니다. 다른 후크를 구현해야 할 수도 있습니다. 또한, export 클래스를 사용하여 TypeScript 툴을 구현하려면 hook {}을 구현해야합니다. hook1, hook2 – Knostradamus

I는 setTimeout 에선 0ms의 호출을 배치하여이를 해결. 이 얼마나 놀라운.

ngOnInit() { 
    setTimeout(function() { 
     (<HTMLElement>document.querySelector('.determinate')).style.width = "100%"; 
    }, 0); 
}

출처

2016-08-29 20:36:49

ngOnInit은 CSS 전환을 무시합니다.

답변

관련 문제