Не масштабировать границу элемента

Я использую анимацию по ключевым кадрам, чтобы сделать увеличивающийся круг в 1 пиксель прозрачным. Но граница div увеличивается с шириной и высотой. Есть ли способ сделать круг с неувеличивающейся границей?

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: scale(20);
    }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

Не совсем, по крайней мере, не с преобразованием, вам нужно анимировать ширину и высоту @keyframes clickEffect { 0% { opacity: 1; width: 1px; height: 1px} 100% { opacity: 0.5; width: 20px; height: 20px}}. Немного хуже по производительности, но что ж, это работает.

— 28.12.2018 23:04

Для меня важна производительность. Есть ли способ добиться такого эффекта только масштабом ??

— 28.12.2018 23:42

Нет, только масштабом добиться этого не удастся.

— 28.12.2018 23:45

javascript html css css-animations keyframe

28.12.2018 22:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

157

Ответы 3

Анимируйте ширину и высоту вместо масштаба.

$(document).on({
  click: function(e) {
    var d = document.createElement('div');
    d.className = 'clickEffect';
    d.style.width = '1px';
    d.style.height = '1px';
    d.style.top = `${e.clientY}px`;
    d.style.left = `${e.clientX}px`;
    document.body.appendChild(d);
    d.addEventListener('animationend', (() => {
      d.parentElement.removeChild(d);
    }).bind(this));
  }
});

div.clickEffect {
  position: fixed;
  border: 1px solid #000;
  border-radius: 50%;
  z-index: 99999;
  transform: translate(-50%,-50%);
  animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    //transform: scale(20);
    width: 20px;
    height: 20px;
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

У вашего решения проблемы с производительностью - анимация ширины и высоты работает медленнее, чем масштаб

— 28.12.2018 23:41

28.12.2018 23:05

Вы должны анимировать высоту и ширину вместо масштаба.

И чтобы он оставался в центре, вы должны перевести X и Y

Итак, код будет выглядеть так:

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 0.5s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
		opacity: 0.5;
		transform: translateX(-20px) translateY(-20px);
		width: 40px;
		height: 40px;
    }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

У вашего решения проблемы с производительностью - анимация ширины и высоты работает медленнее, чем масштаб

— 28.12.2018 23:40

Да, но с помощью scale () вы не можете масштабировать высоту и ширину без масштабирования размера границы.

— 29.12.2018 00:15

28.12.2018 23:15

Вот еще одна идея, которая полагается на перевод и перспективу для достижения эффекта масштаба, сохраняя ту же границу.

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border-radius: 50%;
    z-index: 99999;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:1px solid #000;
    transform:perspective(200px) translateZ(-250px);
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {opacity: 1;}
    100% {opacity: 0.5; 
    transform:perspective(200px) translateZ(90px)}
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

29.12.2018 01:24

Другие вопросы по теме

Код Python для получения значения из javascript

Как предотвратить многократное срабатывание прослушивателя событий keyUp

Я пытаюсь получить верхний край этого элемента и просто изменить его

Как исправить закодированные (арабские) слова в редакторах кода php?

Как я могу переместить данные строки таблицы в шаблон HTML-страницы?

Итерировать с использованием Array.forEach в JavaScript

У меня проблемы с фоном моего веб-сайта

Как сделать так, чтобы анимация закончилась, когда мышь за пределами общего блока?

Как дать ссылку на кнопку, которая относится к определенному кругу

Как создать строку целых чисел с помощью jQuery?

Не масштабировать границу элемента

Ответы 3

Другие вопросы по теме

Похожие вопросы