[Angular] FadeIn and FadeOut animation in Angular
To define an Angular Animation, we using DSL type of language. Means we are going to define few animations ('fadeIn', 'fadeOut').
Then we need to define something called 'transition', which use those animations. 'transition' defines from which state to which state, we should apply animation.
Last we need trigger to pick off the animation.
A little bit more coding needed and might not be easy to get the idea at once.
Remeber this
Trigger transitions to use animations to animate style
Read from 'Right' to 'Left', what we need is
- animation
- transitions
- trigger
1. Animations:
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations'; /*
* DSL
* */
export const fadeIn = animation([
// start
style({
opacity: ,
'border-radius': '5px'
}),
// end
animate(
'1000ms',
style({
opacity: ,
})
)
]); export const fadeOut = animation(
animate(
'500ms',
style({opacity: })
)
);
2. Transition:
/*
* Transition
* */
export const fadeInOut = trigger('fadeInOut', [
transition('void => *', useAnimation(fadeIn)),
transition('* => void', useAnimation(fadeOut))
]);
From 'void' means 'nothing..', the ui element might not in the DOM yet.
To '*' any state, we use fadeIn animation.
From 'any state' to 'void', we use fadeOut animation.
And we also define 'fadeInOut' trigger to use in HTML:
<au-modal [@fadeInOut] *auModalOpenOnClick="paymentModal" [body]="modalBody"> </au-modal>
To see it works, we need to add animations in component:
import { Component } from '@angular/core';
import {fadeInOut} from './animations'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [fadeInOut]
})
export class AppComponent {
title = 'app';
}
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
....
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
[Angular] FadeIn and FadeOut animation in Angular的更多相关文章
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
fadeIn(),fadeOut(),fadeToggle(),fadeTo() fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来). 语法:$(selector).fade ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播
首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
随机推荐
- Linq复杂对象查询
复杂的查询对象, using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...
- OpenCV特征点检测——Surf(特征点篇)&flann
学习OpenCV--Surf(特征点篇)&flann 分类: OpenCV特征篇计算机视觉 2012-04-20 21:55 19887人阅读评论(20)收藏举报 检测特征 Surf(Spee ...
- lastlog---显示系统中所有用户最近一次登录信息。
lastlog命令用于显示系统中所有用户最近一次登录信息. lastlog文件在每次有用户登录时被查询.可以使用lastlog命令检查某特定用户上次登录的时间,并格式化输出上次登录日志/var/log ...
- iOS -读书笔记-网络请求
知道"3次握手"吗?突然想起这个词 什么是3次握手? TCP三次握手/四次挥手详解 这里是3次握手的详解 3次握手就是为了可靠的传送数据,TCP(什么是TCP呢?TCP就是一种可靠 ...
- Android开发之经常使用开源库直接拿来用
1.from 代码家 整理比較好的源代码连接 **************************************************************************** ...
- mysql 不能启动的两种错误提示及解决方法
在linux系统中安装mysql服务器详细步骤并解决ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passw ...
- js35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- php课程 18-60 cookie和session的最主要区别是什么
php课程 18-60 cookie和session的最主要区别是什么 一.总结 一句话总结:存储位置不同:cookie存储在客户端:session存储在服务端. 1.cookie和session在p ...
- php中类的持久化如何实现
php中类的持久化如何实现 一.总结 一句话总结:PHP持久化通过serialize() 和 unserialize() 这两个函数来实现的. 1.持久化之后的对象保存到哪里? 将复杂的数组之类 ...
- httpurlconnection发送文件到服务端并接收
httpurlconnection发送文件到服务端并接收 客户端 import java.io.DataInputStream; import java.io.File; import java.io ...