<tr> 자동 속성 계산으로 위/아래 위/아래로 움직이는 방법

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를 없애고 [숨김] 속성에 바인딩을 시도했지만 성공하지 못했습니다. 나는 또한 * ngIf 및 제거 시도 [숨겨진] 그냥 애니메이션을 가지고 있지만 작동하지 않았다 중 하나 (행이 열어 체재하고 폐쇄하지 않습니다.)

내 2 테이블 행 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

나는 혼자 힘으로이 일에 힘썼다. 그런 다음 행 높이가 아닌 셀 높이를 애니메이션화해야합니다. 행을 고정 높이로 유지하면서 행 높이 애니메이션을 존중하지 않게하는 것은 각 표 셀의 텍스트입니다. 따라서 행이 결코 붕괴되지 않고 뷰에 "스냅"됩니다. 다음과 같이

그래서, 각 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 }) 

       ])) 
      ]) 
      ]) 
    ]