drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Message component

Browse source 
add Message component
This commit is contained in:
梁灏 2016-09-19 14:50:32 +08:00
parent c1cfacb2d4
commit 7c15ac9e31
27 changed files with 653 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

30
styles/animation/fade.less Normal file
View file

@ -0,0 +1,30 @@
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{className}-leave {
animation-timing-function: linear;
}
}
.fade-motion(fade, ivuFade);
@keyframes ivuFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ivuFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

26
styles/animation/index.less Normal file
View file

@ -0,0 +1,26 @@
.motion-common() {
animation-duration: @animation-time;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName) {
.@{className}-enter, .@{className}-appear {
.motion-common();
animation-play-state: paused;
}
.@{className}-leave {
.motion-common();
animation-play-state: paused;
}
.@{className}-enter, .@{className}-appear {
animation-name: ~"@{keyframeName}In";
animation-play-state: running;
}
.@{className}-leave {
animation-name: ~"@{keyframeName}Out";
animation-play-state: running;
}
}
@import "fade";
@import "move";

119
styles/animation/move.less Normal file
View file

@ -0,0 +1,119 @@
.move-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
animation-timing-function: @ease-in-out;
}
}
.move-motion(move-up, ivuMoveUp);
.move-motion(move-down, ivuMoveDown);
.move-motion(move-left, ivuMoveLeft);
.move-motion(move-right, ivuMoveRight);
@keyframes ivuMoveDownIn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes ivuMoveDownOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
opacity: 0;
}
}
@keyframes ivuMoveLeftIn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
}
@keyframes ivuMoveLeftOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes ivuMoveRightIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes ivuMoveRightOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
opacity: 0;
}
}
@keyframes ivuMoveUpIn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes ivuMoveUpOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
opacity: 0;
}
}