91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Angular路由動畫及高階動畫函數的示例分析

發布時間:2021-05-22 09:36:08 來源:億速云 閱讀:142 作者:小新 欄目:開發技術

小編給大家分享一下Angular路由動畫及高階動畫函數的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

一、路由動畫

路由動畫需要在host元數據中指定觸發器。動畫注意不要過多,否則適得其反。

內容優先,引導用戶去注意到某個內容。動畫只是輔助手段。

在router.animate.ts中定義一個進場動畫,一個離場動畫。

因為進場動畫和離場動畫用的特別頻繁,有一個別名叫:enter和:leave。

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

export const slideToRight = trigger('routeAnim',[
    state('void',style({'position':'fixed','width':'100%','height':'100%'})),
    state('*',style({'position':'fixed','width':'100%','height':'80%'})),
    transition('void => *',[
        style({transform:'translateX(-100%)'}),
        animate('.5s ease-in-out', style({transform:'translateX(0)'}))
    ]),
    transition('* => void',[
        style({transform:'translateX(0)'}),
        animate('.5s ease-in-out', style({transform:'translateX(100%)'}))
    ]),
]);

在project-list中使用路由動畫。

import { Component, OnInit , HostBinding } from "@angular/core";
import { MatDialog } from "@angular/material";
import { NewProjectComponent } from "../new-project/new-project.component";
import { InviteComponent } from '../invite/invite.component';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import {slideToRight} from '../../animate/router.animate'

@Component({
  selector: "app-project-list",
  templateUrl: "./project-list.component.html",
  styleUrls: ["./project-list.component.scss"],
  animations:[
    slideToRight
  ]
})
export class ProjectListComponent implements OnInit {
  @HostBinding('@routeAnim') state;

  projects = [
    {
      name: "企業協作平臺",
      desc: "這是一個企業內部項目",
      coverImg: "assets/images/covers/0.jpg"
    },
    {
      name: "自動化測試項目",
      desc: "這是一個企業內部項目",
      coverImg: "assets/images/covers/2.jpg"
    }
  ];
  constructor(private dialog: MatDialog) { }

  ngOnInit() { }

  openNewProjectDialog() {
    // this.dialog.open(NewProjectComponent,{data:'this is a dialog'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '新建項目' }
    });
    dialogRef.afterClosed().subscribe((result) => {
      console.log(result);
    });
  }

  lauchInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
  }

  lauchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '編輯項目' }
    });
  }

  lauchConfimDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: '編輯項目', content: '您確認刪除該項目嗎?' }
    });
  }
}

在task-home中使用路由動畫。

import { Component, OnInit , HostBinding } from "@angular/core";
import { NewTaskComponent } from "../new-task/new-task.component";
import { MatDialog } from "@angular/material";
import { CopyTaskComponent } from "../copy-task/copy-task.component";
import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
import { NewTaskListComponent } from "../new-task-list/new-task-list.component";
import {slideToRight} from '../../animate/router.animate';

@Component({
  selector: "app-task-home",
  templateUrl: "./task-home.component.html",
  styleUrls: ["./task-home.component.scss"],
  animations:[
    slideToRight
  ]
})
export class TaskHomeComponent implements OnInit {
  constructor(private dialog: MatDialog) {}

  @HostBinding('@routeAnim') state;
  ngOnInit() {}

  launchNewTaskDialog() {
    // this.dialog.open(NewTaskComponent);
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: { title: "新建任務" }
    });
  }
  lauchCopyTaskDialog() {
    const dialogRef = this.dialog.open(CopyTaskComponent, {
      data: { lists: this.lists }
    });
  }

  launchUpdateTaskDialog(task) {
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: { title: "修改任務", task: task }
    });
  }

  launchConfirmDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: "刪除任務列表", content: "您確定要刪除該任務列表嗎?" }
    });
  }

  launchEditListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "更改列表名稱" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }
  launchNewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "新建列表名稱" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }
  lists = [
    {
      id: 1,
      name: "待辦",
      tasks: [
        {
          id: 1,
          desc: "任務一: 去星巴克買咖啡",
          completed: true,
          priority: 3,
          owner: {
            id: 1,
            name: "張三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任務一: 完成老板布置的PPT作業",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "進行中",
      tasks: [
        {
          id: 1,
          desc: "任務三: 項目代碼評審",
          completed: false,
          priority: 1,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date()
        },
        {
          id: 2,
          desc: "任務一: 制定項目計劃",
          completed: false,
          priority: 2,
          owner: {
            id: 2,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];
}

定義路由

<mat-list-item [routerLink]="['/project']"> 
    <mat-icon mat-list-icon svgIcon="projects"></mat-icon>
    <h5 mat-line>項目首頁</h5>
    <p mat-line mat-subheader> 查看您的所有項目</p>
  </mat-list-item>
  <mat-list-item [routerLink]="['/task']"> 
    <mat-icon mat-list-icon svgIcon="projects"></mat-icon>
    <h5 mat-line>任務首頁</h5>
    <p mat-line mat-subheader> 查看您的所有項目</p>
  </mat-list-item>

注意:一定要用HostBinding形式。

二、Group

用于同時進行一組動畫變換

group([animate(...),animate(...)...])接收一個數組,數組里寫多個動畫。

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

export const slideToRight = trigger('routeAnim',[
    state('void',style({'position':'fixed','width':'100%','height':'80%'})),
    state('*',style({'position':'fixed','width':'100%','height':'80%'})),
    transition(':enter',[
        style({transform:'translateX(-100%)',opacity:'0'}),
        group([
            animate('.5s ease-in-out', style({transform:'translateX(0)'})),
            animate('.3s ease-in', style({opacity:1}))
        ])
    ]),
    transition(':leave',[
        style({transform:'translateX(0)',opacity:'1'}),
        group([
            animate('.5s ease-in-out', style({transform:'translateX(100%)'})),
            animate('.3s ease-in', style({opacity:0}))
        ])
    ]),
]);

三、Query & Stagger

Query用于父節點尋找子節點,把動畫應用到選中元素。非常強大。

Stagger指定有多個滿足Query的元素,每個的動畫之間有間隔。

做一個示例:新建的時候同時新建2個項目,兩個新建出的項目的動畫依次產生,第一個完成后才開始第二個。

Angular路由動畫及高階動畫函數的示例分析

建立list.animate.ts

進場動畫,先隱藏起來,通過stagger間隔1000s做一個1s的動畫。

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

export const listAnimation = trigger('listAnim', [
    transition('* => *', [
      query(':enter', style({opacity: 0}), { optional: true }), //加入optional為true,后面的狀態動畫都是可選的
      query(':enter', stagger(1000, [
        animate('1s', style({opacity: 1}))
      ]), { optional: true }),
      query(':leave', style({opacity: 1}), { optional: true }),
      query(':leave', stagger(1000, [
        animate('1s', style({opacity: 0}))
      ]), { optional: true })
    ])
  ]);

在project_list中使用

應用query動畫一般都是跟*ngFor在一起的,需要外面套一層div。

<div class="container" [@listAnim]="projects.length">
  <app-project-item *ngFor="let project of projects" [item]="project"
  class="card"
  (onInvite)="lauchInviteDialog()"
  (onEdit)="lauchUpdateDialog()"
  (onDelete)="lauchConfimDialog(project)">
  </app-project-item>
</div>
<button class="ab-buttonmad-fab fab-button" mat-fab type="button" (click)="openNewProjectDialog()">
  <mat-icon>add</mat-icon>
</button>

修改對應的css

// :host{
//     display: flex;
//     flex-direction: row;
//     flex-wrap: wrap;
// }

//把host改為div
.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

修改一下component

import { Component, OnInit , HostBinding } from "@angular/core";
import { MatDialog } from "@angular/material";
import { NewProjectComponent } from "../new-project/new-project.component";
import { InviteComponent } from '../invite/invite.component';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import {slideToRight} from '../../animate/router.animate'
import { listAnimation } from '../../animate/list.animate';
import { projection } from '@angular/core/src/render3';

@Component({
  selector: "app-project-list",
  templateUrl: "./project-list.component.html",
  styleUrls: ["./project-list.component.scss"],
  animations:[
    slideToRight,listAnimation  //第一步,導入listAnimation
  ]
})
export class ProjectListComponent implements OnInit {
  @HostBinding('@routeAnim') state;

  //第二步,改造一下數組,加id
  projects = [
    {
      id:1,
      name: "企業協作平臺",
      desc: "這是一個企業內部項目",
      coverImg: "assets/images/covers/0.jpg"
    },
    {
      id:2,
      name: "自動化測試項目",
      desc: "這是一個企業內部項目",
      coverImg: "assets/images/covers/2.jpg"
    }
  ];
  constructor(private dialog: MatDialog) { }

  ngOnInit() { }

  //第三步,新增元素時hard code一下
  openNewProjectDialog() {
    // this.dialog.open(NewProjectComponent,{data:'this is a dialog'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '新建項目' }
    });
    dialogRef.afterClosed().subscribe((result) => {
      console.log(result);
      this.projects = [...this.projects, 
        {id:3,name:'一個新項目',desc:'這是一個新項目',coverImg:"assets/images/covers/3.jpg"},
        {id:4,name:'又一個新項目',desc:'這是又一個新項目',coverImg:"assets/images/covers/4.jpg"}]
    });
  }

  lauchInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
  }

  lauchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '編輯項目' }
    });
  }

  //第四步,改造一下刪除項目
  lauchConfimDialog(project) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: '刪除項目', content: '您確認刪除該項目嗎?' }
    });
    dialogRef.afterClosed().subscribe(result=>{
      console.log(result);
      this.projects=this.projects.filter(p=>p.id!=project.id);
    });
  }
}

Stagger使得在多個元素時候,動畫交錯開,而不是一起。

看完了這篇文章,相信你對“Angular路由動畫及高階動畫函數的示例分析”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

崇阳县| 库车县| 大同县| 安远县| 平果县| 富阳市| 布尔津县| 保康县| 行唐县| 卫辉市| 堆龙德庆县| 瑞金市| 广宁县| 天峻县| 任丘市| 商丘市| 黄龙县| 天门市| 江永县| 大理市| 太白县| 平利县| 韩城市| 江油市| 华宁县| 泸溪县| 渑池县| 延吉市| 勃利县| 达拉特旗| 石景山区| 石柱| 德庆县| 利辛县| 台东县| 宾阳县| 慈溪市| 遵义市| 榆树市| 乃东县| 高清|