[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和它之前所出现的其余 ...
随机推荐
- [易飞]一张领料单单身仓库"飞了"引起的思考
[摘要]我司每月月初10号前財务要出报表.故10号前要做完毕本月结. PMC经理接到仓管员反馈. 物料-30408011003在账上怎么还有那么多?上次发料的时候已发完. 相应的领料单:5403-20 ...
- HDU 4405 概率期望DP
有 0到 n 个格子.掷骰子走路,求出到终点的数学期望,有飞行的路线. dp[i] 存储在i位置走到终点的期望. 转移方程dp[i]=(dp[i+1] ----> dp[i+6])/6+1; 有 ...
- TCP连接状态详解
tcp状态: LISTEN:侦听来自远方的TCP端口的连接请求 SYN-SENT:再发送连接请求后等待匹配的连接请求 SYN-RECEIVED:再收到和发送一个连接请求后等待对方对连接请求的确认 ES ...
- web api 特点
webapi有很多特点(我不想用优点这个词),比如说restful,支持路由,简单,类似mvc controller/action的代码编写方式,灵活的托管方式,和web的集成等等. Web API的 ...
- go 可以开发桌面应用
go 可以开发桌面应用 go 可以开发桌面应用,但并不是很舒适.可以使用的GUI库有:1.goqt,LiteIDE作者出品,Go和QT的绑定,还未发布2.go.uik,纯Go实现的并发UI工具3.wa ...
- Kinect 开发 —— 手势识别(上)
像点击(clicks)是GUI平台的核心,轻点(taps)是触摸平台的核心那样,手势(gestures)是Kinect应用程序的核心 关于手势的定义的中心在于手势能够用来交流,手势的意义在于讲述而不是 ...
- cksum---检验文件CRC是否正确
- RecyclerView下拉刷新和载入很多其它
之前一直写的是ListVIew下拉刷新,可是好多朋友都说要RecycleView的下拉刷新和滑动载入.事实上,这个原理都是几乎相同.抽出时间,我就写了下RecycleView的下拉刷新和滑动载入很多其 ...
- [React] Use the URL as the source of truth in React
In Single Page Apps we're used to fetch the data on event callbacks. That disables the capacity to u ...
- onvif开发之设备发现功能的实现--转
忙了一个多月,onvif总算告一段落了.这几个星期忙着其他的项目,也没有好好整理一下onvif的东西.接下来得好好整理一下自己的项目思路和项目经验,同时将自己的一些心得写出来,希望对人有所帮助. 相信 ...