防止CSSの移行をするときの角度4コンポーネントの負荷

Question

私はそれが私のライブラリです（入力カウンタを提供する外部ライブラリを使用するので、私はこれ以上のスタイルが適用されていない知っている、実際にCSSの遷移と角度4 で大きな問題を抱えています

input { 
    &[type="text"], 
    &[type="password"], 
    &[type="email"] { 
     border-radius: 4px; 
     border: 1px solid $grey-color; 
     padding: 0.5rem 1rem; 
     outline: none; 
     width: 100%; 
     transition-property: all; 
     transition-duration: 300ms; 
     font-size: inherit; 
    } 
} 

とHTMLテンプレートで：

<input-counter 
    type="text" 
    placeholder="Name" 
    [maxlength]="nameMaxLength" 
    [(ngModel)]="name"> 
</input-counter> 

<input-counter>コンポーネントtempla包ま入力）が、アプリケーション上で、私は入力の次のスタイルを持っていますTE：

コンポーネントがロードされたときに入力がCSSプロパティに「初期化」された場合、私は入力用に定義されたような問題は、CSSの遷移は、入力に印加される

<style> 
    .input-counter-group { 
    display: block; 
    position: relative; 
    } 

    .input-counter-group span { 
    color: #b0b0b0; 
    font-size: 10px; 
    } 

    .input-counter-group .text-input-counter { 
    position: absolute; 
    line-height: 10px; 
    right: 0; 
    bottom: -13px; 
    } 
</style> 
<div class="input-counter-group"> 
    <input 
    [id]="id" 
    [type]="type" 
    [ngClass]="className" 
    [name]="name" 
    [placeholder]="placeholder" 
    [maxlength]="maxlength" 
    [disabled]="disabled" 
    [pattern]="pattern" 
    [required]="required" 
    [readonly]="readonly" 
    [(ngModel)]="value" 
    (focus)="onFocus()" 
    (blur)="onBlur()"> 
    <span *ngIf="enabled" class="text-input-counter"> 
    <span *ngIf="displayMinLength()">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf="displayMaxLength()">/{{ maxlength }}</span> 
    </span> 
</div> 

：

成分 <input-counter>が表示されているときに入力がホバーされたときにすべき問題が発生のみアニメーション枠の色の変化であるのに対し

このアニメーションは、表示されます。

ありがとうございます！

EDIT：問題の起源はngIfでロードされたプラグインcodemirrorだった、と（それ自体が別のコンポーネントからロードされた！）私の入力にボンネットの下にスタイルを適用しますが、CSSの遷移と、それは上記のレンダリングでしたですので、私は[hidden]と表示して、すべてはOKです。

Answer 1

あなたが探しているものを手に入れるangular's animation systemを使用することができます。

あなたのテンプレートでアニメーションやトランジションが発生する必要があるときに、トリガーの状態を変更する必要がどのタグに添付し、あなたの入力カウンタコンポーネントのアニメーションのトリガーを作成します。