CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
Andrey Viktorov
Andrey Viktorov

Reputation: 158

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

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?

Upvotes: 3

Views: 2919

Answers (2)

kenniy
kenniy

Reputation: 86

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.

Upvotes: 3

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

You can find in their official documentation example where you can make custom style for popup

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

You can try to add transition property here

Upvotes: 0

Related Questions