具有淡入/淡出效果的上/下动画

时间:2019-07-07 12:35:51

标签: javascript css angular animation angular6

我已经使用6个角度动画实现了一个动画,动画的类型为上/下滑动以及衰落效果,但我担心的是它的行为不符合预期。 / p>

这是相同的sandBox。 https://codesandbox.io/s/angular-vmw5t

这是目前的样子。

enter image description here

我在这里担心的是:enter动画是否正常工作,因为一旦开始动画,元素就会从底部出现,但是一旦我点击顶部的跨图标 -右键,然后元素稍微上升,然后在底部中淡出。

预期的行为应为,一旦单击 cross-icon ,其当前位置的按钮应移至底部并逐渐消失,我想消除单击按钮后这种轻微的向上移动cross-icon,它应该从当前位置淡入底部。

摘要: 用户单击cross-icon时,淡入/滑出动画无法正常工作。*按钮先稍微向上然后下降然后淡出,它应该从当前位置下降。

1 个答案:

答案 0 :(得分:1)

动画

  animations: [
    trigger('flyInOut', [
      state('in', style({ opacity:1,transform: 'translateY(0)' })),
      transition('void => *', [
        style({ opacity:0,transform: 'translateY(100%)' }),
        animate(200)
      ]),
      transition('* => void', [
        animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
      ])
    ])
  ]

必须以.html之类的格式进行工作

  <button (click)="toogle=!toogle">click</button>
  <div [@flyInOut] *ngIf="toogle" >
    hello word <button (click)="toogle=false">x</button>
  </div>

请参见stackblitz