While delving into Angular, I encountered a minor issue that has me stumped.
I successfully animated a div (similar to a snackbar), but the text within the div does not smoothly appear or disappear like the background layer.
Check out this image for a visual representation of the problem: https://i.sstatic.net/35p6t.gif
import { Component } from '@angular/core';
import { MyService } from './myService';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'snackbar',
templateUrl: './snackbar.component.html',
styleUrls: ['./snackbar.scss'],
animations: [
trigger('shrinkOut', [
state('inactive', style({height: '*'})),
transition('* => void', [
style({ height: '*'}),
animate(300, style({height: 0}))
]),
transition('void => *', [
style({ height: 0}),
animate(300, style({height: '*'}))
]),
]
)
]
})
export class SnackbarComponent {
constructor(
public myService: MyService,
) { }
}div.snackbar {
position: absolute;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 1000;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
div.snackbar.success {
background-color: #9f5a77;
}
div.snackbar.error {
background-color: #f44336;
}<div class="snackbar {{myService.currentService.type}}" *ngIf="myService.currentService" [@shrinkOut]>
Some Text
</div>Do you have any suggestions on how to synchronize the text with the background layer?