Анимация ключевого кадра запаздывает, когда на странице много контента - PullRequest
Новая
       5

Анимация ключевого кадра запаздывает, когда на странице много контента

0 голосов
/ 27 декабря 2018

Я хочу добавить анимированный круг, когда я нажимаю на какой-нибудь div.Поэтому я обрабатываю клики на элементе и добавляю div нулевого размера к координатам кликов.Кроме того, я добавил анимацию ключевого кадра для этого div, чтобы увеличить его ширину и высоту.И наконец, вот стили анимационного div: 

div.clickEffect {
    position: fixed;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: 99999;
}

Добавление этого div в реаги: 

var d = document.createElement('div');
d.className = 'clickEffect';
d.style.top = `${y}px`;
d.style.left = `${x}px`;

const animation = keyframes`
    0% {
        opacity: 1;
        width: ${minSize}px;
        height: ${minSize}px;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 7px 0px #ff00ff;
    }

    100% {
        opacity: 0.4;
        width: ${minSize + radius}px;
        height: ${minSize + radius}px;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 25px 0px #ff00ff;
    }
`;
d.style.animation = `${animation} 1s ease-out`;

Эта анимация плавная, когда на странице не так много контента.Но это запаздывает, когда на странице много контента.Есть ли способ сделать эту анимацию всегда гладкой?

...