向下滑动动画Angular 4 [英] Slide down animation Angular 4

问题描述

我正在为页面设置动画，但是出现以下问题:
我的页面上有内容div，还有一个在内容上方打开另一个div的按钮.我希望该div淡入并滑入，并且希望div波纹管也向下/向上滑入.我为上面的div创建了想要的动画，该动画可以在点击时打开，但不了解如何处理内容div，示例代码如下:

I am trying to animate my page but have the following issue:
I have content div on my page, and a button that opens another div above the content. I would like that div to fade and slide in, and the div bellow to slide down/up as well. I created the animation I wanted for the div above that opens on click, but don't understand what to do with content div, example code bellow:

<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和动画的div一起移动?

Should I create some other trigger that will move my content div with the animated one?

推荐答案

首先，创建一个文件，在其中定义动画并将其导出.只是为了使您的app.component.ts中更加清晰

First, create a file where you would define your animations and export them. Just to make it more clear in your app.component.ts

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

In the following example, I used a max-height of the div that goes from 0px (when it's hidden), to 500px, but you would change that according to what you need.

此动画使用状态(输入和输出)，当我们单击该按钮时，将进行动画切换.

This animation uses states (in and out), that will be toggle when we click on the button, which will run the animtion.

animations.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中，导入动画并创建将切换动画状态的方法.

Then in your app.component, we import the animation and create the method that will toggle the animation state.

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中定义的动画触发器.

slideInOut refers to the animation trigger defined in animations.ts

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

Here is a StackBlitz example I have created : https://stackblitz.com/edit/angular-muvaqu

侧面说明:如果曾经发生错误并要求您添加 BrowserAnimationsModule ，只需将其导入到app.module.ts中即可:

Side note : If an error ever occurs and asks you to add BrowserAnimationsModule, just import it in your app.module.ts:

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

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

这篇关于向下滑动动画Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！