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

【问题标题】：Text does not animate only the background layer文本不仅为背景层设置动画
【发布时间】：2018-09-10 22:43:20
【问题描述】：

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

我设法为 div 设置了动画（如小吃店），但 div 中的文本没有像背景层那样平滑地出现或消失。

这是它如何工作的图像：

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>

关于如何将文本与背景图层同步有什么想法吗？

【问题讨论】：

标签： javascript css angular animation

【解决方案1】：

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

所以，height: '*' 必须替换为 translateY(0)；并且height: 0 必须替换为translateY(-100%)

通过使用height，我只为 div 的高度设置了动画。

【讨论】：

【解决方案2】：

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

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

如果这有帮助，或者您仍然遇到任何问题，请告诉我。 :)

【讨论】：