Angular 2 属性绑定动画失效问题求助

嘿，我一眼就发现了代码里的关键问题，这直接导致了你遇到的所有异常情况！

核心问题：标签闭合错误 #

你的按钮标签写砸了：

<button (click)="toggle()"> toggle div </div>

这里你用了</div>来闭合<button>，这会彻底打乱浏览器的DOM解析逻辑。浏览器会自动尝试修复这个错误，但修复后的DOM结构完全不符合你的预期——按钮没有被正确闭合，后续的div元素也会被错误嵌套，这就解释了：

• 初始状态下文本仍然显示：因为DOM结构混乱，动画绑定的元素可能根本没被正确识别，初始的hidden状态样式没应用上
• 点击事件无响应：按钮的点击事件绑定因为DOM解析错误而失效，甚至影响了其他元素的事件

修复步骤 #

1. 修正按钮标签：把按钮的结束标签改成正确的</button>
2. （可选优化）为hidden状态添加display: none（或者保留opacity但确保元素初始不可见），避免元素虽然透明但仍占据空间

修复后的完整代码如下：

import { Component, trigger, state, style, transition, animate } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <button (click)="toggle()"> toggle div </button>
    <div [@visibilityChanged]="visibilityState">
      <p>Some text...</p>
    </div>`,
  animations: [
    trigger('visibilityChanged', [
      state('shown', style({opacity: 1, display: 'block'})),
      state('hidden', style({opacity: 0, display: 'none'})),
      transition('shown => hidden', animate('600ms')),
      transition('hidden => shown', animate('300ms')),
    ])
  ],
})
export class AppComponent {
  visibilityState: string = 'hidden';
  toggle(){
    this.visibilityState = this.visibilityState === 'hidden' ? 'shown' : 'hidden';
  }
}

额外说明 #

如果不想让元素隐藏时消失（仍保留占位），可以去掉display属性，只保留opacity：

state('shown', style({opacity: 1})),
state('hidden', style({opacity: 0})),

不过这种情况下初始状态可能需要确保元素已经应用了opacity: 0，而标签错误修复后Angular的动画系统就能正常识别状态绑定了。

内容的提问来源于stack exchange，提问作者DollyRolly