do not use 3d transitions
use regular trasnsition fuctions. If need to optomise later, can do so.
This commit is contained in:
parent
4a95d715a7
commit
6a55b96c3d
|
@ -45,15 +45,15 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
|
|
||||||
@at-root .state-0 & {
|
@at-root .state-0 & {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-1 & {
|
@at-root .state-1 & {
|
||||||
transform: scale3d(0.5, 1, 1);
|
transform: scale(0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-2 & {
|
@at-root .state-2 & {
|
||||||
transform: scale3d(0.5, 0.5, 1);
|
transform: scale(0.5, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,15 +80,15 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||||
transform-origin: 100% 0;
|
transform-origin: 100% 0;
|
||||||
|
|
||||||
@at-root .state-0 & {
|
@at-root .state-0 & {
|
||||||
transform: scale3d(0.5, 0.5, 1);
|
transform: scale(0.5, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-1 & {
|
@at-root .state-1 & {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-2 & {
|
@at-root .state-2 & {
|
||||||
transform: scale3d(0.5, 1, 1);
|
transform: scale(0.5, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,15 +115,15 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||||
transform-origin: 100% 0;
|
transform-origin: 100% 0;
|
||||||
|
|
||||||
@at-root .state-0 & {
|
@at-root .state-0 & {
|
||||||
transform: scale3d(0.5, 1, 1);
|
transform: scale(0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-1 & {
|
@at-root .state-1 & {
|
||||||
transform: scale3d(0.5, 0.5, 1);
|
transform: scale(0.5, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-2 & {
|
@at-root .state-2 & {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -152,15 +152,15 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||||
transform-origin: 100% 0;
|
transform-origin: 100% 0;
|
||||||
|
|
||||||
@at-root .state-0 & {
|
@at-root .state-0 & {
|
||||||
transform: scale3d(0.33, 1, 1);
|
transform: scale(0.33, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-1 & {
|
@at-root .state-1 & {
|
||||||
transform: scale3d(0.33, 0.25, 1);
|
transform: scale(0.33, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-2 & {
|
@at-root .state-2 & {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -187,15 +187,15 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
|
|
||||||
@at-root .state-0 & {
|
@at-root .state-0 & {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-1 & {
|
@at-root .state-1 & {
|
||||||
transform: scale3d(0.5, 1, 1);
|
transform: scale(0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .state-2 & {
|
@at-root .state-2 & {
|
||||||
transform: scale3d(0.5, 0.5, 1);
|
transform: scale(0.5, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue