Question

今天我正在使用棱角分明的4个动画套装，它真的很完美;然而，我仍然有一个问题，因为我正在设置从0像素宽度到200像素宽度的元素我发现我的文本使div扩展，因为它消失了I.E：由于包装盒，它使得高度更大。请参阅下面的动画GIF：

TS文件：

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';
    }
  }


}

我的观点HTML文件：

<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>

我找到了一种方法来解决问题，方法是缩小文字并修正高度。但是这种技术非常麻烦，并且由于字体大小而仍然没有流畅的动画效果。请参阅下面的代码和图片：

因此，我想知道是否有人有更好的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: '*'
  })),

ngAnimate angular 4，隐藏幻灯片上的文字

1 个答案: