Question

我会尽量保持简短。出于某种原因，我的动画似乎在宽度/不透明度样式属性上工作正常，但它不适用于高度属性....

动画 -

trigger('Grow', [
transition(':enter', [   // :enter is alias to 'void => *'
  style({height:'0'}),
  animate(500, style({height:'*'})) 
]),
transition(':leave', [   // :leave is alias to '* => void'
  animate(500, style({height:0})) 
])
])

更改＆＃39;身高＆＃39;宽度/不透明度，动画效果很好...... 谁知道这个问题呢？无法在任何地方找到相关答案。

我尝试实现的一个例子就像udemy中的动画一样，点击div高度扩展显示所有视频的部分 - https://www.udemy.com/meteor-react/

感谢阅读。

更新 - 仍然无法正常工作......

也许它与我动画的内容有关？

<div class="animate" *ngIf="show" [@animate]> 
  <div  *ngFor="let video of section"><a>hi</a></div>
</div>

一旦我点击，div.animate会显示（通过ngif）并填充许多显示＆＃39; hi＆＃39;的行。我希望在div.animate show上制作我指定的动画。

帮助！ ^^

Answer 1

您的trigger()功能中没有定义任何状态。

trigger创建一个命名动画触发器，其中包含当绑定到触发器的表达式发生更改时要评估的state()和transition()条目的列表（表达式为[@slideInOut]="helpMenuOpen"在下面的例子中。）

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenuOpen: string;

  constructor() { }

  ngOnInit() {
    this.helpMenuOpen = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out';
  }

}

然后在你的视图中使用它：

<div [@slideInOut]="helpMenuOpen">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>

Answer 2

Angular 动画 cat 与 *ngIf 指令完美配合。

现在官方文档中有一个 section 描述了如何操作。

您示例中的问题是模板动画触发器指定为 [@animate]，但在组件的动画声明中，实际触发器是 Grow。因此，模板触发器需要指定为 [@Grow]。

app.component.ts

    trigger("grow", [ // Note the trigger name
      transition(":enter", [
        // :enter is alias to 'void => *'
        style({ height: "0", overflow: "hidden" }),
        animate(500, style({ height: "*" }))
      ]),
      transition(":leave", [
        // :leave is alias to '* => void'
        animate(500, style({ height: 0, overflow: "hidden" }))
      ])
    ])

app.component.html

<div class="test" *ngIf="show" [@grow]> <!-- Use exact same trigger name here -->
  <div *ngFor="let video of section"><a>hi</a></div>
</div>

工作演示：stackblitz

div高度上的Angular 2/4动画

2 个答案: