Angular：自定义状态动画未按预期工作

Question

我有两个 div（parent 和 child），我想做一个基于自定义状态的特殊动画（关闭 => 打开 && 打开 => 关闭） :

当状态从关闭 => 打开时:
我希望 parent div 的不透明度从 0 开始到 1 和 child 的比例从 0.3 到 1。
当状态从打开 => 关闭时:
我希望 css 属性到 return 到它们的原始值（ parent 的不透明度为 0，child)

好消息是当状态变为 => 关闭 => 打开时动画按预期工作（对于两个 divs）。

坏消息是当状态从打开 => 关闭时动画不工作（仅适用于 child div）。

废话不多说了，这是我做的：

观点HTML:

<div [@openClose]="opened ? 'open' : 'close'" class="parent">
    <div [@animateChild]="opened ? 'open' : 'close'" class="child">
     <p>Child content</p>
    </div>
</div>

中component.ts:

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  animations: [
    trigger('openClose', [
        state('open', style({
           opacity: 1,
           visibility: 'visible',
        })),
        // when we go from close to open do these steps
        transition('close => open', [
          query(':self', [// animate div itself
              animate('200ms ease-in', style({
                opacity: 1,
                visibility: 'visible',
              }))
          ]),
          query('@animateChild', animateChild())// then animate children (.child)
        ]),

        transition('open => close', [
          query(':self', animate('200ms ease-in')),
          query('@animateChild', animateChild()),
        ]),
    ]),
    trigger('animateChild', [
       state('open', style({ opacity: 1, transform: 'scale(1)' })),
       transition('close => open', [
         animate('100ms ease-out')
       ]),

       transition('open => close', [
         style({ transform: 'scale(0.3)', opacity: 0 }),
         animate('100ms ease-out')
       ])
    ])
  ]
})
export class MyComponent implements OnInit {
  opened: boolean;
  constructor() { }

  ngOnInit() {}

  open(){
    this.opened = true;
  }

  close(){
    this.opened = false;
  }
}

在CSS文件中:

.parent{
  width: 100%;
  height: 100vh;
  background: black;
  opacity: 0;/* initialize opacity to 0 for the parent */
}
.child{
   width: 50%;
   background: white;
   transform: scale(0.3);/* initialize scale to 0.3 for the child */
   opacity: 0; /* and opacity to 0 to be invisible when component initialized */
}

这是 Stackblitz 上的例子:
https://stackblitz.com/edit/angular-bjuzyr

我哪里做错了？

Answer 1

好的，我找到了解决方案：
我只需要在animateChild触发器中设置close状态的样式即可：

trigger('animateChild', [
    state('open', style({ opacity: 1, transform: 'scale(1)' })),
    state('close', style({ opacity: 0, transform: 'scale(0.3)' })),// I had to add this line
    transition('close => open', animate('100ms ease-out')),
    transition('open => close', animate('100ms ease-out'))
])

Answer 2

请你试试下面的动画代码：

  animations: [
trigger('openClose', [
    state('open', style({
       opacity: 1,
       visibility: 'visible',
    })),
    state('close', style({
       opacity: 0,
       visibility: 'visible',
    })),
    // when we go from close to open do these steps
    transition('* => *', [
      animate('200ms ease-in'),
    ]),
]),
trigger('animateChild', [
   state('open', style({ opacity: 1, transform: 'scale(1)' })),
   state('close', style({ opacity: 0, transform: 'scale(0.3)' })),
   transition('* => *', [
     animate('100ms ease-out')
   ])
])
]

Angular：自定义状态动画未按预期工作

Angular: custom state animation not working as expected

html

css

angular

angular-animations