Неизвестная ошибка / ошибка в JS (или CSS) Fluent Reveal Effect в моем коде - PullRequest
Новая
       5

Неизвестная ошибка / ошибка в JS (или CSS) Fluent Reveal Effect в моем коде

0 голосов
/ 11 апреля 2020

Итак, я делаю CSS и JavaScript файлы, которые помогают создавать Windows 10 Fluent Design-подобные сайты. И это включает в себя эффект выявления беглости. Я сделал часть, где легкий радиальный градиент распространяется вокруг курсора, но у меня есть некоторые ошибки, которые не позволяют мне делать этот эффект волны / пульсации после нажатия на элемент открытия.
При нажатии на элемент, есть два волны / пульсации отображаются вместо одной (одна у курсора, другая в каком-то другом месте за пределами элемента, и я знаю, что это не случайная позиция, потому что волна всегда начинается в той же точке при нажатии в том же месте).
Думаю, мой код поможет вам лучше понять: 

const clickReveal = function(element, e) {
  let X = e.pageX - element.offsetLeft - 5;
  let Y = e.pageY - element.offsetTop - 5;
  let rippleDiv = document.createElement('div');
  rippleDiv.className = 'ripple';
  rippleDiv.setAttribute('style', 'top: ' + Y + 'px; left: ' + X + 'px;');
  element.appendChild(rippleDiv);
  setTimeout(function() {
    element.removeChild(rippleDiv);
  }, 1000);
};


let revealElementsList = document.getElementsByClassName('reveal');
for (let index=0; index < revealElementsList.length; index++) {
  let revealElement = revealElementsList[index];
  revealElement.addEventListener('click', (event) => {
    clickReveal(revealElement, event);
  }, false);
}
/* PROBABLY NOT THE MAIN PART */
:root {
  --windows-dark-color-light: rgba(100, 100, 100, 1);
  --windows-dark-color-normal: rgba(64, 64, 64, 1);
  --windows-dark-color-dark: rgba(45, 45, 45, 1);
  --button-click: cubic-bezier(0.5, 0, 0, 1);
  --linear: cubic-bezier(0, 0, 1, 1);
  --noise-1: url(data:image/png;base64,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);
}



@keyframes buttonclick {
  0% {transform: scale(1); background-color: var(--windows-dark-color-light);}
  50% {transform: scale(0.975); background-color: var(--windows-dark-color-normal);}
  100% {transform: scale(1); background-color: var(--windows-dark-color-light);}
}

@keyframes rippleeffect {
  0% {transform: scale(0); opacity: 1;}
  100% {transform: scale(30); opacity: 0;}
}



.button {
  font-family: 'Segoe UI', 'SegoeUI', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  color: rgba(255, 255, 255, 1);
  background-color: var(--windows-dark-color-normal);
  border-radius: 5px;
  border: 2px solid transparent;
  outline: none;
  padding: 5px 12.5px;
}

.button:hover {
  background-color: var(--windows-dark-color-dark);
}

.button:focus {
  animation: buttonclick 1s var(--button-click) 1;
  -webkit-animation: buttonclick 1s var(--button-click) 1;
  -moz-animation: buttonclick 1s var(--button-click) 1;
  -o-animation: buttonclick 1s var(--button-click) 1;
  -ms-animation: buttonclick 1s var(--button-click) 1;
}


/* PROBABLY THE MAIN PART */
.reveal {
  background-image: var(--noise-1), radial-gradient(circle at 0% 0%, rgba(31, 31, 31, 0), rgba(31, 31, 31, 0));
  border: 2px solid transparent;
  border-radius: 0px;
  overflow: hidden;
}

  .reveal .ripple {
    position: absolute;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.75) 50px, rgba(255, 255, 255, 0) 50px);
    border-image: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: rippleeffect 1s var(--linear) 1;
    -webkit-animation: rippleeffect 1s var(--linear) 1;
    -moz-animation: rippleeffect 1s var(--linear) 1;
    -o-animation: rippleeffect 1s var(--linear) 1;
    -ms-animation: rippleeffect 1s var(--linear) 1;
    opacity: 0;
  }
<button class="button reveal" style="font-size: 100px;">Click me!</button>

Кроме того,

Непрозрачность волны не уменьшается от 1 до 0 к концу, даже если код четко говорит 

@keyframes rippleeffect {
  0% {transform: scale(0); opacity: 1;}
  100% {transform: scale(30); opacity: 0;}
}
...