wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-12 12:50:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

add slider animation

Browse Source
This commit is contained in:
jljsj
2015-08-24 11:56:37 +08:00
parent c28f14272d
commit 35ba80d884
3 changed files with 81 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/index.less
+62
View File
@@ -8,6 +8,8 @@
@tooltip-arrow-width: 4px;
@tooltip-distance: @tooltip-arrow-width+4;
@tooltip-arrow-color: @tooltip-bg;
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
* {
box-sizing: border-box;
@@ -174,4 +176,64 @@
border-top-color: @tooltip-arrow-color;
}
}
}
.motion-common() {
animation-duration: .3s;
animation-fill-mode: both;
display: block !important;
}
.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}-enter-active, .@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In";
animation-play-state: running;
}
.@{className}-leave.@{className}-leave-active {
animation-name: ~"@{keyframeName}Out";
animation-play-state: running;
}
}
.zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
transform: scale(0, 0); // need this by yiminghe
animation-timing-function: @ease-out-quint;
}
.@{className}-leave {
animation-timing-function: @ease-in-quint;
}
}
.zoom-motion(zoom-down, zoomDown);
@keyframes zoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes zoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}