角。动画弹性元素

Question

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

点击搜索后会变为：

在标记中有两个flex元素：标题（flex: 1）和搜索。在搜索时单击我隐藏第一个并展开第二个。现在我想为过渡做动画。

我开始使用动画标题元素。首先，我尝试了动画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字向左滑动而不是缩小。 （在标题上设置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

任何想法如何修复滑动标题？

Answer 1

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

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

Plunker