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%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale3d(0.5, 1, 1);
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale3d(0.5, 0.5, 1);
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale3d(0.5, 1, 1);
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale3d(0.5, 0.5, 1);
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale3d(0.33, 1, 1);
|
||||
transform: scale(0.33, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale3d(0.33, 0.25, 1);
|
||||
transform: scale(0.33, 0.25);
|
||||
}
|
||||
|
||||
@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%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale3d(0.5, 1, 1);
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale3d(0.5, 0.5, 1);
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue