Angular (4, 5, 6, 7) - ngIf 上滑入滑出动画的简单示例

Question

什么是最低限度和Angular4滑入和滑出[=31]的原生方式=] 容器元素？

例如

<div ngIf="show">  </div>

滑入内容（从上到下就像jQuery.slideDown()）当show 变为 true.

Slide Out 当show变为false[=31=时的内容（适合带缓出效果） ].

Answer 1

首先是一些代码，然后是解释。描述这个的官方文档是 here.

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

在您的模板中：

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

我发现 angular 的方法有点难以掌握，但一旦你理解了它，它就非常简单和强大。

动画中的人类语言部分：

我们将此动画命名为 'slideInOut'。
添加元素（:enter）后，我们执行以下操作：
->立即将元素向上移动 100%（从自身开始），以显示在屏幕外。
->然后对 translateY 值进行动画处理，直到我们处于 0%，元素自然处于该位置。
移除元素后，将 translateY 值（当前为 0）设置为 -100%（屏幕外）。

我们使用的缓动函数是缓入，200毫秒，你可以根据自己的喜好改变。

希望对您有所帮助！

Answer 2

我回答了一个非常相似的问题，这里有一个方法：

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

更清楚

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

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

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

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://angular-muvaqu.stackblitz.io/

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

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

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

Answer 3

实际上，要使用的 Angular 的最小数量（如原始问题中所要求的）只是在 show 变量时向 DOM 元素添加一个 class为真，并通过 CSS.

执行 animation/transition

所以你的最小Angular代码是这样的：

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

使用此解决方案，您需要为转换创建 CSS 规则，如下所示：

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

如果您有复古浏览器兼容性问题，请记住在 transition 中添加供应商前缀。

见the example here

Answer 4

投票最多的答案是没有实现真正的幻灯片 in/out（或 down/up），如：

它没有对高度属性进行软过渡。在时间为零时，元素已经达到其高度的 100%，从而在其下方的元素上产生突然的故障。
当滑动out/up时，元素做了一个translateY(-100%)然后突然消失，导致它下面的元素出现另一个故障。

您可以像这样实现滑入和滑出：

my-component.ts

import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  ...
  animations: [
    trigger('slideDownUp', [
      transition(':enter', [style({ height: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ height: 0 }))]),
    ]),
  ],
})

my-component.html

<div @slideDownUp *ngIf="isShowing" class="box">
  I am the content of the div!
</div>

my-component.scss

.box {
  overflow: hidden;
}

Angular (4, 5, 6, 7) - ngIf 上滑入滑出动画的简单示例

Angular (4, 5, 6, 7) - Simple example of slide in out animation on ngIf

angular

typescript

angular-animations