Angular。动画弹性元素

Question

你好。我有一个看起来像这样的小组件：

点击搜索后变成：

标记中有两个 flex 元素：用于 header (flex: 1) 和用于搜索。在搜索中单击我隐藏第一个并展开第二个。现在我想为过渡设置动画。

我从 header 元素的动画开始。首先我尝试动画 width:

transition(':enter', [
    style({width: 0, 'max-width': 0}),
    animate(500, style({width: '*', 'max-width': '*'})),
]),
transition(':leave', [
    style({width: '*', 'max-width': '*'}),
    animate(500, style({width: 0, 'max-width': 0})),
]),

输入时几乎是即时的，Header 单词向左滑动而不是收缩。（在 header 上设置 overflow: hidden 会完全破坏动画）

然后我尝试制作动画 flex-grow:

transition(':enter', [
    style({'flex-grow': '0.001'}),
    animate(500, style({'flex-grow': '1'})),
]),
transition(':leave', [
    style({'flex-grow': '1'}),
    animate(500, style({'flex-grow': '0.001'})),
]),

进入时动画更好，离开时几乎没有动画。将两者结合起来：

transition(':enter', [
    style({'flex-grow': '0.001'}),
    animate(500, style({'flex-grow': '1'})),
]),
transition(':leave', [
    style({width: '*', 'max-width': '*'}),
    animate(500, style({width: 0, 'max-width': 0})),
]),

Plunker

有什么办法可以修复滑动 header？

Answer 1

解决方案是也为输入元素设置动画。在这种情况下，只有 width 属性需要动画：

  trigger('anim', [
    transition(':enter', [
      style({width: 0}),
      animate(250, style({width: '*'})),
    ]),
    transition(':leave', [
      style({width: '*'}),
      animate(250, style({width: 0})),
    ]),
  ]),

Plunker

Angular。动画弹性元素

Angular. Animating flex elements

angular

flexbox

angular2-animation