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

Question

I'm building a "hovering" menu, using semantic-ui-react's Popup, and want to add a simple show-hide transition, how it can be done?

Answer 1

this is probably coming in too late for this specific OP, but might be useful for someone else trying to figure same out.

I believe you can use the TransionablePortal as shown in the example. Just for fun, I adapted that example to what I think you are trying to do:

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>
)}}

You should be able to make the transition use onMouseEnter and onMouseLeave if you want same transition to be on hover, instead of on click.