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

Question

什么是最小的和Angular4的本地方式滑入和滑出容器元素？

例如

<div ngIf="show">
    <!-- Content -->
</div>

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

当show变为false时,滑出内容(适当地具有缓出效果).

Answer 1

首先是一些代码,然后是解释.描述这一点的官方文档就在这里.

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>

我发现角度方式有点难以掌握,但一旦你理解了它,它就非常容易和强大.

动画部分用于人类语言:

• 我们将这个动画命名为"slideInOut".
• 添加元素(:输入)后,我们执行以下操作:
• - >立即将元素向上移动100%(从其自身),以显示在屏幕外.

• - >然后设置translateY值的动画,直到我们处于0%,其中元素自然是.

• 删除元素后,将translateY值(当前为0)设置为-100%(屏幕外).

我们使用的缓动功能是轻松实现,在200毫秒内,您可以根据自己的喜好进行更改.

希望这可以帮助!

Answer 2

我回答了一个非常相似的问题,这是一种方法:

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

在下面的例子中,我使用了从0px(隐藏时)到500px的div的最大高度,但是你可以根据需要改变它.

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

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变量为true 时向DOM元素添加一个类,并通过CSS执行动画/转换.

所以你的最小 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;
}

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

请参阅此处的示例

Answer 4

获得最多支持的答案是没有实现真正的滑入/滑出（或向下/向上），如下所示：

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

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

我的组件.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 }))]),
    ]),
  ],
})

我的组件.html

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

我的组件.scss

.box {
  overflow: hidden;
}