Question

我正在建立一个＆＃34;悬停＆＃34;菜单，使用semantic-ui-react的弹出窗口，并希望添加一个简单的隐藏转换，如何实现？

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反应：如何向Popup添加转换？

2 个答案: