ngAnimate angular 4, 슬라이드의 텍스트를 숨기기

Question

오늘 앵귤러 4 애니메이션 패키지로 놀고 있었는데 정말 완벽하게 작동합니다. 그러나 0 픽셀 너비에서 200 픽셀 너비로 요소를 움직이게 할 때 나는 여전히 1 가지 질문을 가지고 있습니다. 나는 텍스트가 div가 IE가 사라짐에 따라 확장되도록주의했습니다. 그것은 래핑 상자로 인해 높이가 훨씬 커졌습니다. 아래의 애니메이션 GIF를 참조하십시오

TS 파일 :

<h1>Test</h1> 

<a (click)="animateMe()">Animate</a> 

<div style="width: 1100px;"> 

    <div [@easeOutTest]='mainState' style=" float:left; color: white; display: inline-block"> 
    <div> 
     dit is een main test 
    </div> 
    </div> 

    <div [@easeInTest]='state' style="display: inline-block; color: white; float:left; margin-left: 30px;"> 
    <div> 
     dit is een test sidebar 
    </div> 
    </div> 

</div> 

내가 텍스트 작게함으로써 문제를 해결하는 방법을 발견 : 내보기 HTML 파일이

import { fade, ease, bounceOutLeftAnimation, fadeInAnimation } from './../animations'; 
import { Component } from '@angular/core'; 
import { trigger, stagger, query, group, state, animateChild, transition, animate, style, keyframes, useAnimation } from '@angular/animations'; 

@Component({ 
    selector: 'todos', 
    templateUrl: './todos.component.html', 
    styleUrls: ['./todos.component.css'], 
    animations: [ 

     trigger('easeOutTest', [ 
     state('normal', style({ 
      backgroundColor: 'blue', 
      width: '600px' 
     })), 
     state('shorten', style({ 
      backgroundColor: 'Green', 
      width: '800px' 
     })), 
     transition('normal => shorten', animate('1000ms cubic-bezier(.06, .62, .23, .93)')), 
     transition('shorten => normal', animate('1000ms cubic-bezier(.06, .62, .23, .93)')) 
     ]), 


     trigger('easeInTest', [ 
     state('invisible', style({ 
      backgroundColor: 'blue', 
      opacity: 0, 
      width: 0, 
     })), 
     state('visible', style({ 
      backgroundColor: 'Green', 
      opacity: 1, 
      width: '170px', 
     })), 
     transition('visible => invisible', animate('1000ms cubic-bezier(.06, .62, .23, .93)')), 
     transition('invisible => visible', animate('1000ms cubic-bezier(.06, .62, .23, .93)')) 
     ]), 
    ] 
}) 


export class TodosComponent { 

    state: string = 'invisible'; 
    mainState: string = 'shorten'; 

    animateMe() { 
    if (this.state === 'invisible') { 
     this.state = 'visible'; 
     this.mainState = 'normal'; 
    } else if (this.state === 'visible') { 
     this.state = 'invisible'; 
     this.mainState = 'shorten'; 
    } 
    } 


} 

높이 고정 그러나이 기술은 상당히 성가 시며 글꼴 크기 때문에 유창하게 움직이지 않습니다. 그러므로 나는 사람이 같은 결과를 얻을 수있는 더 좋은 WYA이 있는지 알고 싶습니다

: 아래의 코드와 이미지를 참조하십시오. 사전에 감사드립니다, 건배!.

Answer 1

나는 overflow: hidden 속성이 나를 도울 수있는 것으로 나타났습니다.

개정 코드 :

trigger('easeInTest', [ 
    state('invisible', style({ 
     backgroundColor: 'blue', 
     opacity: 0, 
     width: 0, 
     overflow: 'hidden' 
    })), 
    state('visible', style({ 
    backgroundColor: 'Green', 
     opacity: 1, 
     width: '170px', 
     overflow: '*' 
    })),