Question

我有一个表行，直到你点击它上面一行的“查看详细信息”按钮才可见。目前我正在使用* ngIf来显示第二行并在单击“查看详细信息”按钮时更改绑定对象的布尔属性。我已经阅读了angular2文档中的动画页面，并试图实现“折叠/解折叠”动画，以便当第二个表格行变得可见时，它会从0px高度动画 - >行的高度完全展开（* px）。

我看到的最接近的例子就是这个动画，它将英雄从高（* px）移到0px并且它向上折叠/顺利向上滑动。

animations: [
 trigger('shrinkOut', [
  state('in', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(250, style({height: 0}))
  ])
 ])
]

根据上述情况，我无法解决这个问题。我和* ngIf一起尝试了它并且没有用。（该行只是在添加动画之前立即打开/关闭。）我试图摆脱* ngIf并绑定到[hidden]属性但没有成功。我也尝试删除* ngIf和[隐藏]并且只是拥有动画但是也没有用（行只是保持打开而且从未关闭。）

我的第二个表格行HTML如下所示：

<tr [@visibilityChanged]="visibility">
      <td  colspan="8" class="details-row">
          ...
      </td>
</tr>

我的动画如下：

trigger('visibilityChanged', [
  state('hidden', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(1000, style({height: 0}))
  ])
])

并且可见性变量是组件中的字符串，当单击视图详细信息按钮时，该字符串从“隐藏”更改为“显示”，反之亦然。

我想用角度2动画完成什么？

Answer 1

我自己一直在努力奋斗。然后我意识到，我们需要为单元格高度设置动画，而不是行高。每个表格单元格中的文本都会导致您的行保持在其固定高度，而不是尊重行高动画，因此，该行永远不会崩溃，它只是＆＃34;快照＆＃34;进入视野。

因此，将触发器绑定添加到每个td，如下所示:(仅显示两个单元以节省空间）

<tr>
<td class="col3Destination" [@rowVisibleState]="row.isVisible">{{row.version}} 
/td>
<td class="col4Destination" [@rowVisibleState]="row.isVisible">{{row.dataType}}</td>
</tr>

这是动画组件代码：

animations: [
        trigger('rowVisibleState',
        [
            state('true',
                style({
                   height: '40px',
                   opacity: 1,
                   fontSize: '14px',
                   display: 'table-row'
                })),

            transition('0 => 1', [
                animate('500ms ease-in', keyframes([
                    style({ display: 'table-row', offset: 0 }),
                    style({ fontSize: 0, offset: 0 }),
                    style({ height: 0, offset: 0 }),
                    style({ opacity: 0, offset: 0.0 }),
                    style({ height: '40px',fontSize: '14px', display: 'table-row', opacity: 1, offset: 1.0 })
                ]))
            ]),
            state('false',
                style({
                    height: '0px',
                    opacity: 0,
                    display: 'none',
                    fontSize: 0
                })),
            transition('1 => 0', [
                animate('500ms ease-out', keyframes([
                    style({ opacity: 1, offset: 0 }),
                    style({ fontSize: '14px', offset: 0 }),
                  style({ height: '40px', offset: 0 }),
                  style({ fontSize: 0, height: 1, opacity: 0.5, offset: 0.9}),
                  style({ height: '0px', opacity: 1, display: 'none', offset: 1.0 })

                ]))
            ])
            ])
    ]

如何使用自动属性计算来上下打开/关闭动画

1 个答案: