|
|
@@ -22,30 +22,41 @@ section {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
- //display: none;
|
|
|
- z-index: 1;
|
|
|
- .transform(translate3d(100%, 0, 0));
|
|
|
- -webkit-backface-visibility: hidden;
|
|
|
- -webkit-transition: -webkit-transform 250ms @defaultTrasition;
|
|
|
- /*
|
|
|
+ display: none;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+
|
|
|
+ &:first-child, &.show {
|
|
|
+ display: block;
|
|
|
+ .transform(translate3d(0%, 0, 0));
|
|
|
+ }
|
|
|
+ &.hide { display: none; }
|
|
|
+
|
|
|
+ &.slide {
|
|
|
+ .transform(translate3d(100%, 0, 0));
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ -webkit-transition: -webkit-transform 250ms @defaultTrasition;
|
|
|
+ /*
|
|
|
-moz-transition: @keyframe @defaultTrasition;
|
|
|
-o-transition: @keyframe @defaultTrasition;
|
|
|
transition: @keyframe @defaultTrasition;
|
|
|
- */
|
|
|
- &:first-child, &.show {
|
|
|
- .transform(translate3d(0%, 0, 0));
|
|
|
- //display: block;
|
|
|
+ */
|
|
|
+
|
|
|
+ &:first-child, &.show {
|
|
|
+ .transform(translate3d(0%, 0, 0));
|
|
|
}
|
|
|
- &.hide {
|
|
|
- .transform(translate3d(-100%, 0, 0));
|
|
|
- //display: none;
|
|
|
+ &.hide {
|
|
|
+ .transform(translate3d(-100%, 0, 0));
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
&.pop {
|
|
|
- .transform(scale(0.5));
|
|
|
z-index: 0;
|
|
|
opacity: 0;
|
|
|
+ display: block;
|
|
|
-webkit-transition: all 250ms @defaultTrasition;
|
|
|
+ .transform(scale(1.2));
|
|
|
|
|
|
&:first-child, &.show {
|
|
|
z-index: 1;
|
|
|
@@ -54,7 +65,7 @@ section {
|
|
|
}
|
|
|
&.hide {
|
|
|
z-index: 0;
|
|
|
- .transform(scale(1.2));
|
|
|
+ .transform(scale(0.8));
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|