cubic-bezier variable

This commit is contained in:
afc163 2015-07-23 15:04:12 +08:00
parent 0d0e07a3a6
commit 6805ff4d64
3 changed files with 12 additions and 14 deletions

View File

@ -51,7 +51,7 @@
&-content {
height: 0;
transition-duration: .3s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: @ease-out;
overflow: hidden;
color: @text-color;
padding: 0 16px;

View File

@ -25,7 +25,7 @@
.fade-effect() {
animation-duration: 0.3s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
animation-timing-function: @ease-in;
}
&-fade-enter {

View File

@ -1,7 +1,5 @@
@tabPrefixClass: ant-tabs;
@easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
@effect-duration: .3s;
.@{tabPrefixClass} {
@ -20,12 +18,12 @@
transform: scaleX(1);
transform-origin: 0 0;
&-transition-forward {
transition: right 0.3s @easing-in-out,
left 0.3s @easing-in-out 0.3s * 0.3;
transition: right 0.3s @ease-in-out,
left 0.3s @ease-in-out 0.3s * 0.3;
}
&-transition-backward {
transition: right 0.3s @easing-in-out 0.3s * 0.3,
left 0.3s @easing-in-out;
transition: right 0.3s @ease-in-out 0.3s * 0.3,
left 0.3s @ease-in-out;
}
}
@ -113,7 +111,7 @@
&-nav {
box-sizing: border-box;
padding-left: 0;
transition: left 0.5s @easing-in-out;
transition: left 0.5s @ease-in-out;
position: relative;
margin: 0;
list-style: none;
@ -154,7 +152,7 @@
> a {
padding: 8px 20px;
transition: color 0.3s @easing-in-out;
transition: color 0.3s @ease-in-out;
display: block;
color: #666;
@ -204,7 +202,7 @@
&-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
transition: transform @effect-duration @ease-in-out;
}
&-slide-horizontal-backward-leave {
@ -218,7 +216,7 @@
&-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active {
transform: translateX(100%);
transition: transform @effect-duration @easing-in-out;
transition: transform @effect-duration @ease-in-out;
}
&-slide-horizontal-forward-enter {
@ -227,7 +225,7 @@
&-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active {
transform: translateX(0);
transition: transform @effect-duration @easing-in-out;
transition: transform @effect-duration @ease-in-out;
}
&-slide-horizontal-forward-leave {
@ -241,6 +239,6 @@
&-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active {
transform: translateX(-100%);
transition: transform @effect-duration @easing-in-out;
transition: transform @effect-duration @ease-in-out;
}
}