angular - 角。动画 flex 元素

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})),
]),

普朗克

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

Answer 1

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

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

普朗克