Динамическая продолжительность для анимации SCSS на основе текущих атрибутов - PullRequest
Новая
       43

Динамическая продолжительность для анимации SCSS на основе текущих атрибутов

0 голосов
/ 01 июня 2018

Я наткнулся на следующий индикатор выполнения .Тем не менее, я заметил, что импульсная анимация на компонентах панели имеет постоянную длительность, что означает, что она будет играть намного быстрее, чем дольше будет окрашенная полоса.Соответствующий (сокращенный) код выглядит следующим образом: 

.progress {
    &__bar {
        animation: pulse 2s ease-out infinite;
    }
}

@keyframes pulse {
    0% {
        background-position: -50% center, right center, left center;
    }

    100% {
        background-position: 150% center, right center, left center;
    }
}

При использовании короткого $bar.css({ width: percent + "%" }); полоса растягивается и, таким образом, анимация импульса также ускоряется.Есть ли способ переписать анимацию, чтобы она всегда имела одинаковую скорость, независимо от длины индикатора выполнения?

1 Ответ

0 голосов
/ 01 июня 2018

Ну, я раздвоил ваш индикатор прогресса и сделал только некоторые изменения scss.Я играл с обертками, абсолютным позиционированием и скрытием переполнения.

Я создал div class="progress__bar--bkg", а также @mixin innerBkg для работы с фоном только с фиксированной шириной и div class="progress__bar--wrap"скрыть только переполнение фона (сначала я пытался без него, но overflow: hidden; повлияло также на свечение текста и конца строки. В отношении последнего я изменил z-index: 1 для :before и :after псевдоэлементов.

...