Как я могу заставить элемент исчезать после нажатия кнопки с помощью animate.css?

<div class = "animate__animated animate__fadeInUp animate__fast" role = "alert">
  <strong>${alertmsg}</strong> ${msg}
  <button type = "button" class = "btn-close" aria-label = "Close"></button>
</div>

как сделать так, чтобы оно исчезало после нажатия кнопки закрытия?

если бы я включил класс animate__fadeInUp и animate__fadeOutUp, он просто исчезнет.

Вы должны использовать FadeIn при отображении элемента и использовать Fadeout при его сокрытии. Только по одному. Что-то вроде переключателя, но опять же, это зависит от стилей, добавленных в файл Cals. Если вы можете создать код или скрипку, это может лучше помочь в вашем случае.

— 24.05.2024 14:23

html css animate.css

24.05.2024 14:16

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете добиться эффекта затухания, используя это:

<script>
    document.querySelector('.btn-close').addEventListener('click', function() {
      const alertDiv = document.getElementById('alert');
      
      alertDiv.classList.remove('animate__fadeInUp');
      
      alertDiv.classList.add('animate__fadeOutUp');
      
      alertDiv.addEventListener('animationend', () => {
        alertDiv.remove();
      });
    });
</script>

24.05.2024 14:26

Ответ принят как подходящий

Я считаю, что для достижения желаемого эффекта вы могли бы просто добавлять и удалять классы, используя обычные манипуляции с DOM, верно?

Вот пример,

<--! First your could just add id's to both the div and button -->
<div id = "alertContainer" class = "animate__animated animate__fadeInUp animate__fast" role = "alert">
  <strong>${alertmsg}</strong> ${msg}
  <button type = "button" id = "closeButton" class = "btn-close" aria-label = "Close"></button>
</div>

<script>
  const alertContainer = document.getElementById('alertContainer');
  const closeButton = document.getElementById('closeButton');


  // Later in js, you could just remove the fadeIn animation and add fadeOut
  closeButton.addEventListener('click', function() {
    alertContainer.classList.remove('animate__fadeInUp');
    alertContainer.classList.add('animate__fadeOutUp');

    // Wait for the animation to complete before removing the alert from the DOM
    setTimeout(function() {
      alertContainer.remove();
    }, 1000);
  });
</script>

Позвольте мне знать, если это помогает

Ваше здоровье

24.05.2024 14:28

Этого можно достичь, используя это:

<!DOCTYPE html>
<html>
<head>
  <title>Alert Message</title>
  <style>
    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .animate__fadeOut {
      animation-name: fadeOut;
      animation-duration: 2s;
      animation-fill-mode: forwards;
    }
  </style>
</head>
<body>
  <script>
    let alertmsg = "Warning!";
    let msg = "This is a warning message.";

    let alertHTML = `
      <div id = "alert" class = "animate__animated animate__fadeInUp animate__fast" role = "alert">
        <strong>${alertmsg}</strong> ${msg}
        <button id = "closeButton" type = "button" class = "btn-close" aria-label = "Close">Close</button>
      </div>
    `;

    document.body.innerHTML += alertHTML;

    document.getElementById('closeButton').addEventListener('click', function() {
      document.getElementById('alert').classList.add('animate__fadeOut');
    });
  </script>
</body>
</html>

24.05.2024 14:30

Вы можете использовать JavaScript или jQuery, чтобы добавить класс animate__fadeOutUp к элементу при нажатии кнопки.

Вот пример:

<div class = "animate__animated animate__fadeInUp animate__fast" role = "alert" id = "alertBox">
    <strong>${alertmsg}</strong> ${msg}
    <button type = "button" class = "btn-close" aria-label = "Close" onclick = "fadeOutAlert()"></button>
</div>

JS::

<script>
    function fadeOutAlert() {
        var alertBox = document.getElementById('alertBox');
        alertBox.classList.remove('animate__fadeInUp');
        alertBox.classList.add('animate__fadeOutUp');
    }
</script>

jQuery::

$('.btn-close').click(function() {
    $('#alertBox').removeClass('animate__fadeInUp').addClass('animate__fadeOutUp');
});

Обязательно включите библиотеку jQuery, если вы решите использовать версию jQuery.

24.05.2024 14:40

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

Пустое пространство создается в верхней части веб-страницы, когда положение навигационной панели установлено фиксированным

Получить кнопку ввода для запуска контейнера

Как использовать @apply Tailwindcss и другие в CodePen

Antd — компонент таблицы — положение горизонтальной полосы прокрутки

Применить стили .mat-column-name к дочернему компоненту в Angular Material

CSS Соедините круги пунктирной линией

Подсетка CSS добавляет неравномерное пространство между элементами

Слот как родительский для другого слота в Vue

Как уменьшить расстояние между столбцами внутри v-таблицы vuetify?

Свертываемые строки в сетке

Как я могу заставить элемент исчезать после нажатия кнопки с помощью animate.css?

Ответы 4

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

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