Как создать анимацию в html css и js?

ProgramBox

Как создать анимацию в html css и js?

Post author:admin
Запись опубликована:23 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #css #dynamic-html

#javascript #HTML #css #динамический-html

Вопрос:

Привет, я новый разработчик и пытаюсь создать веб-сайт. Основная цель веб-сайта — предоставить посетителям фрагмент текста. Некоторые из моих помощников дали мне javascript для копирования текста внутри <p></p> элемента, и он выдает пользовательское предупреждение о копировании текста. Но мне нужна была анимация / переход, чтобы при нажатии кнопки копирования пользовательское предупреждение о копировании появлялось слева направо.

  var buttons = document.getElementsByClassName('copystatus');

for (let button of buttons) {
  button.addEventListener('click', function() {
     let statusElement = this.closest('.latestatus');
     let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;

    copyTextToClipboard(textToCopy);
    addCopyStatusAlert(this.parentNode);
  });
}

function copyTextToClipboard(text) {
  const copyText = document.createElement('textarea');
  copyText.style.position="absolute";
  copyText.style.display="none";
  copyText.value = text;

  document.body.appendChild(copyText);
  copyText.select();
  document.execCommand('copy');
  document.body.removeChild(copyText);
}

function addCopyStatusAlert(element) {
  if (!element.getElementsByClassName('status-copy-alert').length) {
    let copyAlertElement = document.createElement('span');
    copyAlertElement.classList.add('status-copy-alert')
    let copyMessage = document.createTextNode('Copied!');
    copyAlertElement.appendChild(copyMessage);

    element.appendChild(copyAlertElement);
    setTimeout(function() {
      element.removeChild(copyAlertElement);
    }, 700);
  }
}

 <div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
    <div class="bock">
     <div class="latestatus">
      <p class="copytxt">Life is good when you have books</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
     <div class="latestatus">
      <p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
    </div>
    <div class="block">
     <div class="latestatus">
      <p class="copytxt">Cats are better than dogs.</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
     <div class="latestatus">
      <p class="copytxt">Cats are better than dogs.</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
    </div>
   </div>
  </div>

Развернуть фрагмент

Пользовательское оповещение <span> создается с помощью JavaScript.
Чем заранее

1. Вероятно, вам нужен переход CSS в transform translateX, но точно сказать невозможно, поскольку вы не включили CSS для элемента span в свой вопрос, поэтому мы не знаем, где он находится / куда он должен попасть.

2. Вы также можете проверить animate.style , если вам нужна библиотека css.

3. status-copy-alert { позиция: относительная; цвет фона: #18b495; цвет: #ffffff; отступ: 10 пикселей 10 пикселей; радиус границы: 5 пикселей; слева: 8 пикселей; } .status-copy-alert:перед{ содержимое:»»; позиция: абсолютная; высота: 10 пикселей;ширина: 10 пикселей; цвет фона: #18b495; слева: — 5 пикселей; преобразование: поворот (45 градусов); верх: 39%; }

Ответ №1:

Как было предложено @A Haworth в комментариях, ниже приведен фрагмент кода, который использует преобразование css. Я обновил тайм-аут с 700 до 800, чтобы интервал оставался немного дольше.

 var buttons = document.getElementsByClassName('copystatus');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let statusElement = this.closest('.latestatus');
    let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;

    copyTextToClipboard(textToCopy);
    addCopyStatusAlert(this.parentNode);
  });
}

function copyTextToClipboard(text) {
  const copyText = document.createElement('textarea');
  copyText.style.position = "absolute";
  copyText.style.display = "none";
  copyText.value = text;

  document.body.appendChild(copyText);
  copyText.select();
  document.execCommand('copy');
  document.body.removeChild(copyText);
}

function addCopyStatusAlert(element) {
  if (!element.getElementsByClassName('status-copy-alert').length) {
    let copyAlertElement = document.createElement('span');
    let copyMessage = document.createTextNode('Copied!');
    copyAlertElement.appendChild(copyMessage);

    element.appendChild(copyAlertElement);
    copyAlertElement.classList.add('status-copy-alert', 'slide-in');
    setTimeout(function() {
      element.removeChild(copyAlertElement);
    }, 800);
  }
}

 .slide-in {
  animation: slide-in 0.25s forwards;
  -webkit-animation: slide-in 0.25s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateX(0%);
  }
}

.status-copy-alert {
  position: absolute;
  background-color: #18b495;
  color: #ffffff;
  padding: 10px 10px;
  border-radius: 5px;
  left: 65px;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.status-copy-alert:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: #18b495;
  left: -5px;
  transform: rotate(45deg);
  top: 39%;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<div class="mainStatus">
  <h2 class="statusHeading">Latest English Status</h2>
  <div class="allStatus">
    <div class="bock">
      <div class="latestatus">
        <p class="copytxt">Life is good when you have books</p>
        <div>
          <button class="copystatus btn">Copy</button>
        </div>
      </div>
      <div class="latestatus">
        <p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
        <div>
          <button class="copystatus btn">Copy</button>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="latestatus">
        <p class="copytxt">Cats are better than dogs.</p>
        <div>
          <button class="copystatus btn">Copy</button>
        </div>
      </div>
      <div class="latestatus">
        <p class="copytxt">Cats are better than dogs.</p>
        <div>
          <button class="copystatus btn">Copy</button>
        </div>
      </div>
    </div>
  </div>
</div>

Развернуть фрагмент