Prevent css transition when angular 4 component load - css

Question

I have a big problem with css transitions and angular 4.
Actually, I use an external library which provides an input counter (that's my library, so I know no more style is applied to the wrapped input), but on the application I have the following style for the inputs:
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;
}
}
And in the html template:
<input-counter
type="text"
placeholder="Name"
[maxlength]="nameMaxLength"
[(ngModel)]="name">
</input-counter>
<input-counter> component template:
<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>
The problem is when component is loaded, a css transition is applied to the input, like if the input was "initialized" to the css properties I defined for inputs:
This animation appears when the component <input-counter> is displayed, whereas the only animation which should happens is the border color changes when the input is hovered.
Thanks!
EDIT: the origin of the problem was the plugin codemirror which was loaded with ngIf, and applied under the hood a style to my input (itself loaded from another component!), but with css transitions it did the rendering above, so I display it with [hidden] and all is ok.

Answer 1

You can use angular's animation system to get what you are looking for.
Create an animation trigger for your input-counter component, attach it to whichever tag you need to animate in your template and change the trigger's state when you need the transition to happen.