语义 UI React：如何向 Popup 添加过渡？

Question

我正在制作ui一个"hovering"菜单，使用semantic-ui-react's Popup，想添加一个简单的显示隐藏转换，如何实现完成了吗？

Answer 1

您可以在他们的官方文档示例中找到您可以为弹出窗口自定义样式的地方

import React from 'react'
import { Button, Popup } from 'semantic-ui-react'

const style = {
  borderRadius: 0,
  opacity: 0.7,
  padding: '2em',
}

const PopupExampleStyle = () => (
  <Popup
    trigger={<Button icon='eye' />}
    content='Popup with a custom style prop'
    style={style}
    inverted
  />
)

export default PopupExampleStyle

您可以尝试在此处添加转换属性

Answer 2

对于这个特定的 OP 来说，这可能来得太晚了，但可能对其他试图找出相同答案的人有用。

我相信您可以使用示例中显示的 TransionablePortal。只是为了好玩，我将该示例改编为我认为您正在尝试做的事情：

import React, { Component } from 'react'
import { Button, Menu, TransitionablePortal } from 'semantic-ui-react'

export default class TransitionablePortalExamplePortal extends Component {
state = { open: false }
handleOpen = () => this.setState({ open: true })
handleClose = () => this.setState({ open: false })
render() {
const { open } = this.state

return (
  <TransitionablePortal
    closeOnTriggerClick
    onOpen={this.handleOpen}
    onClose={this.handleClose}
    transition={{animation: "fade left", duration: 500 }}
    openOnTriggerClick
    trigger={
      <Button circular basic
        icon="ellipsis vertical"
        negative={open}
        positive={!open}
      />
    }
  >
  <Menu vertical style={{ right: '1%', position: 'fixed', top: '0%', zIndex: 1000}}>
    <Menu.Item>Menu Item 1</Menu.Item>
    <Menu.Item>Menu Item 2</Menu.Item>
  </Menu>
  </TransitionablePortal>
)}}

如果您希望相同的过渡处于悬停状态而不是处于悬停状态，则您应该能够使用 onMouseEnter 和 onMouseLeave 进行过渡点击

语义 UI React：如何向 Popup 添加过渡？

Semantic UI React: how to add a transition to Popup?

reactjs

semantic-ui

semantic-ui-react