语义UI反应弹出淡入/淡出

Question

我试图让弹出窗口淡出淡出...

似乎semantic-ui-react没有让你访问转换，这是最好的方法...在https://codesandbox.io/s/z35z9vw953可以找到一个例子

这是后人的样本组件：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "semantic-ui-css/semantic.min.css";
import { Popup } from "semantic-ui-react";

class App extends Component {
  state = {
    isOpen: true
  };
  render() {
    let trigger = <div>OK!</div>;
    return (
      <div>
      <Popup
        trigger={trigger}
        content="hello world"
        open={this.state.isOpen}
        position="right center"
      />

      {!this.state.isOpen && <button onClick={()=>this.setState({isOpen: true})}>Click to open</button>}
      {this.state.isOpen && <button onClick={() => this.setState({ isOpen: false })}>Click to close</button>}

      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

编辑：

我尝试在整个事物周围进行包裹，并使其显示/隐藏过渡控制，但看起来弹出窗口的可见性是!important所以它真的很容易随着淡入淡出...看到这里https://codesandbox.io/s/43mvoynq7及以下：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "semantic-ui-css/semantic.min.css";
import { Popup, Transition } from "semantic-ui-react";

class App extends Component {
  state = {
    isOpen: true
  };
  render() {
    let trigger = <div>OK!</div>;
    return (
      <div>
        <Transition
          visible={this.state.isOpen}
          animation="scale"
          duration={500}
        >
          <Popup
            trigger={trigger}
            content="hello world"
            open={this.state.isOpen}
            position="right center"
          />
        </Transition>
        {!this.state.isOpen && (
          <button onClick={() => this.setState({ isOpen: true })}>
            Click to open
          </button>
        )}
        {this.state.isOpen && (
          <button onClick={() => this.setState({ isOpen: false })}>
            Click to close
          </button>
        )}
        <button onClick={() => {}}>OK</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

转换只是css classes，你可以动态更新。

 className = { `transition fade ${(this.state.isOpen) ? 'in' : 'out'}` }

只需确保Popup，“isOpen”在过渡期间。

Working example from your first link;

class App extends Component {
  state = {
    isOpen : true,
    fading : null
  };
  toggle = () => {
    clearTimeout(this.state.fading);
    this.setState({
      isOpen : !this.state.isOpen,
      fading : setTimeout(() => {this.setState({fading:null})}, 1000)
    });
  };
  render() {
    let trigger = <div>OK!</div>;
    return <div>
        <Popup
          trigger   = { trigger }
          content   = "hello world"
          open      = { this.state.isOpen || this.state.fading }
          className = { `transition fade ${(this.state.isOpen) ? 'in' : 'out'}` }
          position  = "right center"
        />

        <button onClick={ this.toggle }>
          Click to {this.state.isOpen ? "close" : "open"}
        </button>
    </div>;
  }
}