Angular 浏览器动画从底部向上滑动

Question

我正在尝试创建简单的动画。好的是它可以工作，但我想要的方向相反。 我想做的是从下到上打开div。并从上到下关闭div。

这是我的角度动画

animations: [
    trigger('inOutAnimation', [
      transition(':enter', [
        style({ height: 0, opacity: 0,}),
        animate('1s linear ', style({ height: 318, opacity: 1 })),
      ]),
      transition(':leave', [
        style({ height: 318, opacity: 1 }),
        animate('1s linear', style({ height: 0, opacity: 0 })),
      ]),
    ]),
  ],

我正在制作动画的 Div 具有绝对位置，而他的父级具有相对位置。 我可以做些什么来反转动画？我在互联网上尝试了一些东西，但似乎没有什么能像animation-direction: reverse;

Answer 1

这种方法会更好。定义state，然后像这样进行转换：

 animations: [
trigger('inOutAnimation', [
  state('inState', style({ bottom: 0, opacity: 1 })),
  state('outState', style({ bottom: -100px, opacity: 0})),
  transition('inactive => active', [
    outState
    animate('1s linear', inState),
  ]),
  transition('active => inactive', [
    inState
    animate('1s linear', outState),
  ]),
  
]),
]

然后您的inOutAnimation 应该以编程方式将其值从active 更改为inactive。另外我建议你使用bottom css 而不是height。