文本不仅为背景图层设置动画

Question

我正在学习Angular，我偶然发现了一个我无法解决的小问题。

我设法为div设置动画（就像小吃吧），但div中的文字没有像背景图层那样平滑或消失。

以下是其行为的图像：

＆＃13;

＆＃13;

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,
  ) { }
}

＆＃13;

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;
}

＆＃13;

<div class="snackbar {{myService.currentService.type}}" *ngIf="myService.currentService" [@shrinkOut]>
  Some Text
</div>

＆＃13;

＆＃13;

＆＃13;

有关如何将文本与背景图层同步的任何想法？

Answer 1

translateY() CSS函数在2D平面上垂直重新定位元素。

当您使用height时，您只需设置 div 的高度，因为只有背景图层会动画而不是文本。

如果这有帮助，或者您仍然面临任何问题，请告诉我。 ：）

Answer 2

我设法意识到我做错了什么。为了使文本具有动画效果，我应该使用transform属性而不是height属性。

因此，height: '*'必须替换为translateY(0);并且height: 0必须替换为translateY(-100%)

使用height我只动画了div的高度。