当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ng-animate

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者孙承弼

操作系统跨平台

开源组织无

适用人群未知

软件概览

�� ng-animate

ng-animate is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in animate.css, but with the power and flexibility of Angular animations instead of CSS.

Demo

The demo of the animations is available at https://jiayihu.github.io/ng-animate/.

Usage

npm install ng-animate --save

Example

Import the animation from the package and pass it to your Angular component using useAnimation:

// my-component.component.ts
import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce))])
  ],
})
export class MyComponent {
  bounce: any;
}

<!-- my-component.component.html -->
<div [@bounce]="bounce"></div>

Note: Make sure to have included BrowserAnimationsModule in your AppModule and the web-animation.js polyfill.

It's also possible to import only a subset of the animations:

import { bounce } from 'ng-animate/lib/bouncing';

Animation params

All the animations provided by ng-animate support at least two optional params timing and delay to specify the animation duration and delay. Default value for timing is usually 1s and 0s for delay.
You can pass the params object using the Javascript API or within the component template:

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce, {
      // Set the duration to 5seconds and delay to 2seconds
      params: { timing: 5, delay: 2 }
    }))])
  ],
})
export class MyComponent {}

Using a template can achieve the same result, but you'll have access to the component context:

<div [@bounce]="{ value: bounce, params: { timing: myTiming || 5, delay: myDelay || 2 } }"></div>

Animations

All the animations are organized by their group. Many of them have additional params other than timing/delay: refer to Advanced Usage for more details. Nevertheless you can probably ignore them if you're happy with how they are by default.

Attention seekers

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello

Bouncing

bounceIn
bouceOut. Additional param: scale

The following bouncing animations have additional params a, b, c, d for translate

bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

Fading

All fading animations have additional params fromOpacity, toOpacity for opacity transition and a, b for translate.

fadeIn
fadeInDown
fadeInLeft
fadeInRight
fadeInUp
fadeOut
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUp

Sliding

Sliding animations are basically fading animations without a change of opacity. They can also receive the same params.

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Flippers

flip
flipInX
flipInY
flipOutX
flipOutY

LightSpeed

lightSpeedIn
lightSpeedOut

Rotating

All rotating animations have additional params fromOpacity, toOpacity for opacity transition, origin for transform-origin and degrees for rotate3d.

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

Specials

jackInTheBox
hinge
rollIn
rollOut

Zooming

zoomIn
zoomOut

The following zooming animations have additional params a, b for translate

zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Advanced params

Many of the animations support also other params like scale, fromOpacity, toOpacity and much more, allowing extremely flexible usage and customisation if you're not happy with default values.

Single letters like a, b, c, d are used for the steps of some animations: a is the starting value, d is the ending.
The animated property they refer to depends on the animation and the direction: usually translate on axis Y from -Down/-Up, axis X for -Left/-Right.

useAnimation(bounceInDown, {
  params: {
    timing: 5,

    // Specify granular values for `translate` on axis Y during 'bounceInDown' 
    a: '-3000px',
    b: '25px',
    c: '-10px',
    d: '5px',
  }
})

使用案例

ngAnimate模块

ngAnimate模块和ngRoute一样，不属于核心模块，都是需要script引入，然后在模块内依赖注入那ngAnimate做了什么？ ngAnimate 模型可以添加或移除 class 。 ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HT
ng-animate和ng-cookies用法

———ng-animate 本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后引入angular.anim
ng-animate动画实例

http://devdocs.io/angular/nganimate <div ng-if="bool" class="fade"> Fade me in out </div> <button ng-click="bool=true">Fade In!</button> <button ng-click="bool=false">Fade Out!</button> /* The st
angular的动画ngAnimate模块

ngAnimate模块和ngRoute一样，不属于核心模块，都是需要script引入，然后在模块内依赖注入那ngAnimate做了什么？ ngAnimate 模型可以添加或移除 class 。 ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HT
ng-animation

1.在组件定义和声明触发器 2.声明state 3.在标签上使用[@state]='state’指明是哪个触发器 4.在标签上定义函数切换state step1,step2 定义触发器 trigger是个函数 animations:[cardAnim] animations这个数组存放animation相关的函数 import { trigger, state, transition, sty
AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch

angularJS 在模板里判断属性后显示相应html怎么写? { <!doctype html> <html ng-app> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-b
animate-动画

animate改变样式的动画 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>动画</title> <link rel="stylesheet" type="text/css" href="css.css" /> <script src
angular 插件ngAnimate

ngAnimate 作用：为页面添加动画效果步骤：（1）引入 js angular-animate.min.js 注：引入的插件版本不要比angular.js的版本高（2）在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngAnimate’]); 当我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，
Angular动画

Angular动画一.核心概念 1.State和Transition 动画其实就是从一个状态过渡到另一个状态，状态本身包含形状颜色大小等等，State就是定义状态而Transition是定义如何过渡,state和transition构成了trigger 2.Animate函数 Animate规定了具体怎样过渡，比如时间、过渡的速度等，animate有多个重载形式 animate 数字类型:表示毫
AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model

AngularJS的绑定： ng-bind可用于绑定变量, {{ 表达式}} 内放置变量时，作用与ng-bind相同。如下例： <!doctype html> <html> <head> <script src="bower_components/angular/angular.js"></script> </head> <body ng-app="
Angular 动画

原文：https://code.angularjs.org/1.5.0-rc.0/docs/guide/animations 1)、动画 AngularJS 1.3 为常用的directives，例如ngRepeat， ngSwitch，和ngView提供挂钩，通过 $animate service也可以为自定义的directive使用。这些animation钩子设置在各种directive
javascript – ngIf with ngAnimate – 动画期间重复的HTML内容

我尝试做简单的角度动画.但是我遇到了一个问题,当我快速点击按钮时(在动画完成之前),我点击时会多次创建内容容器… 如何防止这种情况？我希望在单击后停止动画,然后在不在新对象上的同一对象上开始动画？ HTML 1 2 Chosen = 1 Chosen = 2 JS var app = angular.module('test', ['ngAnimate']); app.controller('Te