do not use 3d transitions

use regular trasnsition fuctions. If need to optomise later, can do so.
This commit is contained in:
Ray Elliott 2020-03-28 14:15:36 +00:00
parent 4a95d715a7
commit 6a55b96c3d
1 changed files with 15 additions and 15 deletions

View File

@ -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);
}
}
}