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

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

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

Я использую анимацию по ключевым кадрам, чтобы увеличить прозрачность в 1px-круге.Но граница 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>

Ответы [ 3 ]

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

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

И чтобы держать его по центру, вы должны перевести 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>
0 голосов
/ 29 декабря 2018

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

$(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>
0 голосов
/ 29 декабря 2018

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

$(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>
...