Angular.io v8：动画对象和query-子级简单且一起 我对Angular.ioV8动画的工作方式缺乏了解： https://stackblitz.com/edit/angular-yrxvby

编程问答 2022-08-12

问题描述

我对Angular.io（V8）动画的工作方式缺乏了解：

我想为基础对象及其子对象设置动画：

enter image description here

https://stackblitz.com/edit/angular-yrxvby 

<div class="wrap"
    [@anim1]="anim1" [@anim2]="anim2"
    (@anim1.start)="onAnimationEvent($event)"
    (@anim1.done)="onAnimationEvent($event)"
>
    <button [class.active]="anim1" (click)="toggleAnim1()">Anim 1</button>
    <button [class.active]="anim2" (click)="toggleAnim2()">Anim 2</button>

    <hr>
    <b class='b'>B</b>
    <b class='b'>B</b>
    <b class='b'>B</b>
    <b class='b'>B</b>
</div>

import { Component } from '@angular/core';
import { trigger,transition,group,query,style,animate,keyframes,state } from '@angular/animations';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],animations: [
    trigger('anim1',[
      state('true',style({
        border: '10px solid pink',backgroundColor: 'purple',})),state('false',style({
        border: '10px solid lime',backgroundColor: 'green',transition('true => false',[
        animate('1s linear')
      ]),transition('false => true',[
        animate('.2s linear')
      ]),]),trigger('anim2',[
      transition('* => false',[
        query('b',animate( 1000,style({ border: '12px solid cyan' })))
      ]),transition('* => true',style({ border: '4px solid red' })))
      ]),])
  ] // animations
})
export class AppComponent {
  anim1 = false;
  anim2 = false;

  toggleAnim1() {
    this.anim1 = !this.anim1;
  }

  toggleAnim2() {
    this.anim2 = !this.anim2;
  }

  ngOnInit() {
  }
}
  • 为基础对象设置动画基本上有效：：从紫色变为绿色并返回（由按钮触发的状态更改触发）
  • 为包含的<b>标签制作动画，但是无法按预期进行：当然，在过渡期间，颜色会发生变化（变为红色或蓝色），但前后突然恢复为默认颜色（周围有白色边框）。

可以这么说，它既不是来自最终动画状态，也不是最终动画状态。 我在做什么错了？

我确实注意到，我将b样式放在过渡中的查询中（基于我所看到的内容），有没有办法将它们放在state()中？

我可以结合主要对象动画（anim1）和子动画（anim2）吗？ （以最简单的方式来回切换。一个变量来回全部读取它们 ...）

我确实注意到，重新加载后，主要对象有时也会短暂出现其（动画前）css基本颜色...

如果可以的话，我确实会想开始使用.css定义的颜色一切，因此只需在组件内指定“另一种状态”（活动状态）源，避免将css样式复制为“恢复正常”。 有可能吗？

我应该不是以false开头，而是以undefined开头，并且/或者按照* <=> true,false <=> true的方式做一些事情（分组？）？

解决方法

您无法实现您所想的。 父>子关系之间存在限制。 请查看此票证：https://github.com/angular/angular/issues/18775

推荐的实现方法如下： 在每个元素中添加一个@child并指定其结束状态

<span [@child]="{value:'yes/no',params: { opacity: 0.5 }}"></span>

,

首先，这是一种不好的做法，要实现/处理整个带有角度的动画。 保持简单，让CSS规则完成大部分任务。尽管可以实现或处理几乎所有内容，但只需执行Angular中的技巧即可减少代码行。 通过这种方式，您可以创建自定义动画（@-webkit-keyframes），用于动画，父级，子级的css规则，并仅通过角度动画来控制分配。

为增进理解，只需花一点时间在Angular animation上介绍基本知识。为了更好地理解其他方法，

现在让我们讨论代码中的现有问题。查询选择器query('b',有效，但是animation方法使用不正确，正如my fork中所见，cubic-bezier适用于query。

例如，如果使用有序动画，则在父级内部对嵌套元素进行动画处理，请利用animateChild：

每次在Angular中触发动画时，父动画 拥有优先权，并且所有子动画均被阻止。为了一个 要运行子动画，父动画必须NSString *str = @"some string ^ ^"; NSUInteger len = [str length]; unichar buffer[len+1]; [str getCharacters:buffer range:NSMakeRange(0,len)]; for(int i = 0; i < len; i++) { if (buffer[i] == '^') NSLog(@"%C",buffer[i]); } 包含子动画的元素，并使用此元素运行它们 功能。

angularangularangular-animationsanimationanimationanimation