web-dev-qa-db-ja.com

Angular（4、5、6、7）-ngIfのスライドインアウトアニメーションの簡単な例

Angular4のslide inおよびスライドアウトコンテナ要素？

例えば.

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

Slide Inコンテンツ（jQueryのように上から下へ。 slideDown （））whenshowはtrueになります。

スライドアウトコンテンツ（適切にイーズアウト効果あり）showがfalse。

angulartypescriptangular-animations
27
abdul-wahab

最初にいくつかのコード、次に説明。これを説明している公式ドキュメントは 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％上に移動して、画面外に表示します。

  • ->次に、自然に要素が存在する0％になるまでtranslateY値をアニメーション化します。

  • 要素が削除されたら、translateY値（現在は0）を-100％（画面外）にアニメートします。

使用しているイージング関数はイーズインで、200ミリ秒で、好みに合わせて変更できます。

お役に立てれば！

80
Hoff

私は非常に似た質問に答えましたが、これを行う方法は次のとおりです：

最初に、アニメーションを定義してエクスポートするファイルを作成します。 app.component.tsでより明確にするため

次の例では、0px（非表示の場合）から500pxに達するdivのmax-heightを使用しましたが、必要に応じて変更します。

このアニメーションは状態（インとアウト）を使用し、ボタンをクリックするとトグルされ、アニメーションが実行されます。

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 ],
  ...
})
23
br.julien

実際に使用されるAngularの最小量（元の質問で要求されたように）は、show変数がtrueの場合にDOM要素にクラスを追加し、CSS経由でアニメーション/遷移を実行するだけです。 。

したがって、minimumAngularコードは次のとおりです。

<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にベンダープレフィックスを追加することを忘れないでください。

ここの例 を参照してください

8
Ferie

アニメーション：

animations: [
    trigger('openClose', [
        state('open', style({
            height: '*',
            opacity: '1'
        })),
        state('closed', style({
            height: '0px',
            opacity: '0'
        })),
        transition('open => closed', [
            animate('0.5s')
        ]),
        transition('closed => open', [
            animate('0.5s')
        ]),
    ]),
],

テンプレートでアニメーション化されるノード：

<whatever [@openClose]="show ? 'open' : 'closed'"></whatever>

テンプレートのトグルボタン：

<button (click)="toggleShow()">
    <span *ngIf="show; else hideNode">Hide</span>
    <ng-template #hideNode>Show</ng-template>
</button>

コンポーネントコード：

export class ShowHideComponent {
    show = false;

    toggleShow() {
        this.show = !this.show;
    }
}
0
dlporter98