javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(skeleton-text): animation no longer jumps on large skeleton text elements (#22697)

Browse Source 
resolves #22694
This commit is contained in:
Daniel Ehrhardt
2021-05-24 14:52:39 +02:00
committed by GitHub
parent dc430af906
commit 1a36922f41
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/skeleton-text/skeleton-text.scss
View File

@ -47,7 +47,12 @@ span {
:host(.skeleton-text-animated) { :host(.skeleton-text-animated) {
position: relative; position: relative;
background: linear-gradient(to right, $skeleton-text-background 8%, $skeleton-text-background-animated 18%, $skeleton-text-background 33%); background: linear-gradient(
to right,
$skeleton-text-background 8%,
$skeleton-text-background-animated 18%,
$skeleton-text-background 33%
);
background-size: 800px 104px; background-size: 800px 104px;
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@ -59,11 +64,11 @@ span {
/* stylelint-disable property-blacklist */ /* stylelint-disable property-blacklist */
@keyframes shimmer { @keyframes shimmer {
0% { 0% {
background-position: -468px 0 background-position: -400px 0;
} }
100% { 100% {
background-position: 468px 0 background-position: 400px 0;
} }
} }
/* stylelint-enable property-blacklist */ /* stylelint-enable property-blacklist */