时间戳

首页 > 解决方案 > Angular Animations - 如何在状态之间保持样式？

javascript - Angular Animations - 如何在状态之间保持样式？

问题描述

我开始研究 Angular Animations 并遇到了一种我不知道这是否是动画表现的正常方式的行为。

所以我在介绍页面中编写了代码，一切正常，这是我现在拥有的代码：

组件.ts

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.scss'],
  animations: [
    trigger('toggle', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: '#C6ECFF'
      })),
      transition('open => closed', [
        animate('.5s ease-in')
      ]),
      transition('closed => open', [
        animate('.5s ease-out')
      ]),
    ])
  ]
})
export class ComponentOneComponent {
  isOpen = true;

  toggle = () => (this.isOpen = !this.isOpen);
}

组件.html

<button (click)="toggle()" [@toggle]="isOpen ? 'open' : 'closed'">
  {{ isOpen ? "OPEN" : "CLOSED" }}
</button>

正如人们所看到的，这是一个简单的代码。情况是在动画之间，背景颜色在最终变为黄色或蓝色之前变为灰色，它不会将离开状态的样式保持为将要进入的状态。

所以我有想法在我的文件上更改 de CSS .scss，看看添加属性是否会导致它的行为符合预期，并且它起作用了！

因此，添加以下代码：

button {
  width: 100px; // this is some extra, the button was jumping when the button text changed
  background-color: white;
}

使状态之间的过渡工作正常，它还产生了某种渐变效果。

在StackBlitz中做了一个工作示例，只需取消注释 CSS 文件中的 CSS background-color 属性，您就会看到发生了什么。

所以我的问题是，如何在过渡完成之前保持 CSS 样式的状态？有没有办法让它表现得像 CSS 背景颜色解决方案？

如果您还想解释为什么它会这样，将不胜感激。

标签： javascriptcssangularangular-animations

解决方案

推荐阅读