Question

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

似乎没有语义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>;
  }
}

SemanticUI React Popup淡入/淡出

1 个答案: