ReactJS - CSSTransition - div исчезает после тайм-аута - PullRequest
Новая
       20

ReactJS - CSSTransition - div исчезает после тайм-аута

0 голосов
/ 17 мая 2019

Я переписываю свою старую страницу с PHP на ReactJS.У меня проблема с сокрытием и показом div.Я хочу, чтобы мой div ". Tooltip" отображался после нажатия ". Tooltip-act"

Ранее я делал это с помощью jQuery, но обнаружил, что в Reactлучший способ сделать это - CSSTransition.Я сделал это, но что-то не так.После того, как я нажму ". Tooltip-act" my ". Tooltip" показывает, но только для времени ожидания, а затем исчезает.Я хочу, чтобы он оставался до тех пор, пока я не изменил состояние обратно на ложное (у меня пока нет этой кнопки).Пожалуйста, смотрите только на ". Tooltip t-umiej" , потому что остальные уже ждут своей очереди

Мой код реакции: 

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import avatar from './../../assets/images/avatar.png';

const getAge = birthDate => Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e+10);

function Home(props) {
  const [showSkills, setShowSkills] = useState(false);
  const [showQuests, setShowQuests] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const [showHobby, setShowHobby] = useState(false);

  return (
    <div>
      <div className="profil-okno">
        <span className="name">{props.dane.personalia.imie} {props.dane.personalia.nazwisko}</span>
        <div className="avatar-main">
          <img src={avatar} alt="avatar" />
        </div>
        <div className="staty">
          <ul>
            <li><label>Płeć: </label>{props.dane.personalia.plec}</li>
            <li><label>Rasa: </label>{props.dane.personalia.rasa}</li>
            <li><label>Klasa: </label>{props.dane.personalia.klasa}</li>
            <li><label>Poziom (wiek): </label>{getAge(props.dane.personalia.urodziny)}</li>
            <li><label>Charakter: </label>{props.dane.personalia.charakter}</li>
            <li><label>Lokalizacja: </label>{props.dane.personalia.lokalizacja}</li>
          </ul>
        </div>
      </div>
      <div className="odnosniki">
        <ul>
          <li>Umiejętności:<br /><span className="tooltip-act" onClick={() => setShowSkills(true)} >+ kliknij by rozwinąć</span></li>
          <li>Osiągnięcia:<br /><span className="tooltip-act" onClick={() => setShowQuests(true)} >+ kliknij by rozwinąć</span></li>
          <li>Historia:<br /><span className="tooltip-act" onClick={() => setShowHistory(true)} >+ kliknij by rozwinąć</span></li>
          <li>Hobby:<br /><span className="tooltip-act" onClick={() => setShowHobby(true)} >+ kliknij by rozwinąć</span></li>
          <span>{showSkills.toString()}</span>
        </ul>
      </div>
      <CSSTransition in={showSkills} timeout={2000} classNames="t-umiej">
        <div className="tooltip t-umiej">
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>jQuery</li>
            <li>Symfony</li>
            <li>PHP</li>
            <li>MySQL</li>
            <li>Git</li>
            <li>Administracja</li>
            <li>Grafika rastrowa</li>
            <li>Grafika wektorowa</li>
            <li>Język angielski</li>
            <li>Język niemiecki</li>
            <li>ReactJS</li>
          </ul>
          <p><a href="skills.php">+ WIĘCEJ</a></p>
          <span className="tooltip-hide">- kliknij by zwinąć</span>
        </div>
      </CSSTransition>
      {/* other tooltips */}
    </div>
  );
}

export default Home;

CSS (для подсказок):

.tooltip-act {
    display: block;
    width: 150px;
    margin: 0 auto;
    color: #777777;
    cursor: pointer;
}

.tooltip-hide {
    color: #777777;
    cursor: pointer;
}

.tooltip ul {
    margin-top: 0;
}

.tooltip li {
    list-style: circle;
}

.tooltip {
    position: absolute;
    display: none;
    min-width: 200px;
    text-align: left;
    border-style: solid;
   border-width: 45px 23px;
   -moz-border-image: url(../images/zwoj.png) 45 23 stretch;
   -webkit-border-image: url(../images/zwoj.png) 45 23 stretch;
   -o-border-image: url(../images/zwoj.png) 45 23 stretch;
   border-image: url(../images/zwoj.png) 45 23 fill stretch;
}

.t-umiej-enter {
    display: none;
}

.t-umiej-enter-active {
    display: block;
    transition: display 500ms;
}

.t-umiej-exit {
    display: block;
}

.t-umiej-exit-active {
    display: none;
    transition: display 500ms;
}

И мой старый рабочий jQuery: 

var tool="";
var licznik=0;

$(document).ready(function () {

    $(".tooltip-act").on("click", function (event) {
        if (licznik==0) {
            tool=$(this).attr("tool");
            $(tool).css("bottom", $(window).height() - event.pageY - 50).css("left", event.pageX - 20);
            $(tool).slideDown();
            licznik=1;
            return false;
        } else {
            $(tool).slideUp();
            licznik=0;
        }
    });

    $(".tooltip").on("click", function () {
        $(tool).slideUp();
        licznik=0;
    });

});

Скажите, пожалуйста, что я делаю не так и как это исправить.

Второй вопрос: что будетлучший способ получить похожий эффект на мой старый jQuery (скользящий вниз и вверх)

Заранее спасибо

1 Ответ

0 голосов
/ 17 мая 2019

Хорошо, я понял это.В моем css отсутствовали классы enter-done и exit-done (они не использовались в примере документации CSSTransition).Теперь это выглядит так, и это работает.

.t-umiej-enter {
    display: none;
}

.t-umiej-enter-active {
    display: block;
    transition: display 500ms;
}

.t-umiej-enter-done{
    display: block;
}

.t-umiej-exit {
    display: block;
}

.t-umiej-exit-active {
    display: none;
    transition: display 500ms;
}

.t-umiej-exit-done {
    display: none;
}

Тема закрыта.

...