Angular动画组件封装

最新推荐文章于 2023-09-05 23:16:59 发布

勘察加熊人

最新推荐文章于 2023-09-05 23:16:59 发布

阅读量284

点赞数

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/cf8833/article/details/123653242

版权

typescript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

Angular动画组件封装

step1: D:\vue\untitled2902\src\app\app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {OpenCloseComponent} from './open-close/open-close.component';

@NgModule({
  declarations: [
    AppComponent,
    OpenCloseComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

step2: D:\vue\untitled2902\src\app\app.component.html

<h1>测试</h1>
<app-open-close></app-open-close>

step3: D:\vue\untitled2902\src\app\animations.1.ts

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

export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}'
  }),
  animate('{{ time }}')
]);

export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s'
      }
    })
  ])
]);

step4: D:\vue\untitled2902\src\app\open-close\open-close.component.ts

import {Component, OnInit} from '@angular/core';
import {transition, trigger, useAnimation} from "@angular/animations";
import {transitionAnimation} from "../animations.1";

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transitionAnimation, {
          params: {
            height: '200px',
            opacity: 0.8,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ]),
      transition('closed => open', [
        useAnimation(transitionAnimation, {
          params: {
            height: '100px',
            opacity: 0.5,
            backgroundColor: 'yellow',
            time: '1s'
          }
        })
      ]),
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {

  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }


  constructor() {
  }

  ngOnInit(): void {
  }

}

step5: D:\vue\untitled2902\src\app\open-close\open-close.component.html

<div>
  <nav>
    <button type="button" (click)="toggle()">Toggle open / Close</button>
  </nav>
  <div [@openClose]="isOpen ? 'open':'closed'" class="open-close-container">
    <p>the box is now {{isOpen ? 'open' : 'Closed'}}!</p>
  </div>
</div>