angular4动画的使用

chadLi 发布于2019-08-22 11:20 / 3068人阅读

摘要：引入动画模块的动画模块是独立出去，所以要通过来下拉动画模块在中导入动画模块并注册注册下面就开始写一个简单的动画这里是封装好动画引入，在里面新建一个文件引入动画需要的模块编写默认，出场，离场的动画下面是实现代码之后和平时使用动画差不多

引入动画模块

angular4的动画模块是独立出去，所以要通过npm来下拉动画模块

npm install -S  @angular/animations; [-S : save ]

在app.module.ts中导入动画模块并注册

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

// 注册
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    routing
  ]

下面就开始写一个简单的动画

1：这里是封装好动画引入，在animations里面新建一个fly-in.ts文件

2：引入动画需要的模块

3：编写默认，出场，离场的动画

下面是实现代码

// 之后和平时使用动画差不多，在需要的地方引入相关的指令，接口什么的
import {
  trigger,  // 动画封装触发，外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from "@angular/animations";
export const flyIn = trigger("flyIn", [
  state("in", style({transform: "translate(0)"})), // 默认平移0

  transition("void => *", [ // 进场动画
    animate(300, keyframes([
      style({opacity: 0, transform: "translateX(-100%)", offset: 0}),
      style({opacity: 1, transform: "translateX(25px)",  offset: 0.3}),
      style({opacity: 1, transform: "translateX(0)",     offset: 1.0})
    ]))
  ]),
  transition("* => void", [ // 离场动画
    animate(300, keyframes([
      style({opacity: 1, transform: "translateX(0)",     offset: 0}),
      style({opacity: 1, transform: "translateX(-25px)", offset: 0.7}),
      style({opacity: 0, transform: "translateX(100%)",  offset: 1.0})
    ]))
  ])

]);

在要使用的组件的component.ts的实现

在component这个装饰器里面注入要依赖的动画模块

import {flyIn} from "../animations/fly-in";

@Component({
  selector: "app-tongji",
  templateUrl: "./tongji.component.html",
  styleUrls: ["./tongji.component.less"],
  animations: [
    flyIn
  ]
})

html中的实现


  
    动画

这样就可以轻松实现一个动画了。

GPU云服务器云服务器 angular4 html的动画特效数组的使用字典的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92216.html

Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
使用Angular4动画为页面添彩

摘要：使用组件将根据视口放置，并滑过页面。这意味着我们不能使用状态来对路由组件进行样式，因为这样可以将样式应用于父结点我们的示例中的主元素，而不是路由组件。原文：Angular — Supercharge your Router transitions using new animation features (v4.3+) 首先我们看一下效果展示的demo Basic Variation...

jay_tian 2019-08-20 18:24 评论0 收藏0
Angular4 实战开发

摘要：实战系列目前处于章节不定，内容不定阶段，这一系列文章不会长篇大论的讲解概念，而是以用为主，结合通俗易懂的实例来让大家理解常用的知识点。原文链接实战开发《Angular 实战系列》目前处于章节不定，内容不定阶段，这一系列文章不会长篇大论的讲解概念，而是以用为主，结合通俗易懂的实例来让大家理解常用的知识点。章节 Angular CLI 创建组件(Component) 使用CSS美化组...

Hegel_Gu 2019-08-21 11:44 评论0 收藏0
Angular4 实战开发

摘要：实战系列目前处于章节不定，内容不定阶段，这一系列文章不会长篇大论的讲解概念，而是以用为主，结合通俗易懂的实例来让大家理解常用的知识点。原文链接实战开发《Angular 实战系列》目前处于章节不定，内容不定阶段，这一系列文章不会长篇大论的讲解概念，而是以用为主，结合通俗易懂的实例来让大家理解常用的知识点。章节 Angular CLI 创建组件(Component) 使用CSS美化组...

vboy1010 2019-08-01 16:59 评论0 收藏0