Question

我正在将旧页面从PHP重写为ReactJS。我在隐藏和显示div时遇到问题。我希望在点击“。tooltip-act”

后显示div “。tooltip”

以前我是用jQuery完成的，但是我发现在React中做到这一点的最佳方法是CSSTransition。我做到了，但是出了点问题。单击“。tooltip-act” 后，我的“。tooltip” 会显示，但仅显示超时时间，然后消失。我希望它一直保持到我将状态更改回false为止（我尚未设置此按钮）。请只查看“。tooltip t-umiej” ，因为其他人已经在等待轮到他们了

我的React代码：

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具有类似效果（上下滑动）的最佳方法是什么？

预先感谢

Answer 1

好了，我知道了。我的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;
}

要关闭的主题。

ReactJS-CSSTransition-超时后div消失

1 个答案: