向下滑动动画Angular 4

Question

我正在尝试为我的页面设置动画，但遇到以下问题：

我的页面上有内容 div，还有一个在内容上方打开另一个 div 的按钮。我希望那个 div 淡入淡出并滑入，并且 div 也可以向下/向上滑动。我为上面的 div 创建了我想要的动画，在点击时打开，但不明白如何处理内容 div，示例代码如下：

 <div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [

  state('*', style({

  })),
  transition(':enter', [
    style({
      transform: 'translateY(-10%)',
      opacity: 0
    }),
    animate('.5s ease-in-out', style({
      transform: 'translateY(0)',
      opacity: 1
    }))
  ]),
  transition(':leave', [
    animate('.5s ease-in-out', style({
      transform: 'translateY(-10%)',
      opacity: 0
    }))
  ])
])
]

我应该创建一些其他触发器来移动我的内容 div 与动画吗？

原文由 Nemanja Grabovac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，创建一个文件，您将在其中定义动画并导出它们。只是为了让你的 app.component.ts 更清楚

在下面的示例中，我使用了从 0px（隐藏时）到 500px 的 div 的最大高度，但您可以根据需要进行更改。

此动画使用状态（进出），当我们单击按钮时将切换状态，这将运行动画。

动画.ts

 import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

然后在您的 app.component 中，我们导入动画并创建将切换动画状态的方法。

app.component.ts

 import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

这是您的 app.component.html 的样子：

 <div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut 指的是animations.ts中定义的动画触发器

这是我创建的 StackBlitz 示例： https ://stackblitz.com/edit/angular-muvaqu

旁注：如果发生错误并要求您添加 BrowserAnimationsModule ，只需将其导入您的 app.module.ts ：

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})

原文由 br.julien 发布，翻译遵循 CC BY-SA 3.0 许可协议