Блог

Главная - Вопросы по программированию - Анимация TailwindCSS на условно отрисованных компонентах в React

Анимация TailwindCSS на условно отрисованных компонентах в React

#javascript #css #reactjs #next.js #tailwind-css

Вопрос:

Если я условно визуализирую компонент в зависимости от некоторого состояния, как я могу анимировать его переход между открытым и закрытым состояниями в React с помощью TailwindCSS?

 {successMessage amp;amp; (
              <div className="flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded">
                <p>Added to watchlist!</p>
                <button onClick={() => setSuccessMessage(false)}>X</button>
              </div>
            )}

Этот код наполовину работает, но в нем нет анимации или переходного периода. Как я могу это исправить?

Комментарии:

1. Вы можете сделать так, как MB_ предложил в своем ответе, или вы можете предоставить некоторые реальные анимации затухания или что-то в этом роде.

Ответ №1:

Попробуйте что-нибудь вроде этого :

   <div className={`flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded ${your_state ? 'opacity-100' : 'opacity-0'}`}>
   ...
  </div>

Ответ №2:

Я бы рекомендовал для этого библиотеку AOS, так как вам нужно будет проделать еще немного работы, чтобы это работало с TailwindCSS.

Попробуйте это

Установите Aos

 npm install aos --save

Внесите в свое досье

 import React, { useEffect } from "react";
import AOS from 'aos';
import "aos/dist/aos.css";

useEffect(() => {
  AOS.init({
    duration : 1000
  });
}, []);

Вы можете изменять продолжительность по своему усмотрению.

Добавить в качестве атрибута в данные HTML-тега
-aos=»имя анимации»

Пример

  <div> data-aos="fadeIn" </div>

Дополнительные атрибуты, которые вы можете использовать

     data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"

Список всех анимаций

Документация

Метки: