Ufdjrw

How to make Illustrator type tool selection automatically adapt with text length

How did the audience guess the pentatonic scale in Bobby McFerrin's presentation?

Simulating Exploding Dice

Windows 10: How to Lock (not sleep) laptop on lid close?

What other Star Trek series did the main TNG cast show up in?

Working through the single responsibility principle (SRP) in Python when calls are expensive

Identify 80s or 90s comics with ripped creatures (not dwarves)

Is this wall load bearing? Blueprints and photos attached

Do warforged have souls?

Button changing its text & action. Good or terrible?

should truth entail possible truth

What's the point in a preamp?

Can withdrawing asylum be illegal?

Using dividends to reduce short term capital gains?

Does Parliament hold absolute power in the UK?

Why can't devices on different VLANs, but on the same subnet, communicate?

How do I design a circuit to convert a 100 mV and 50 Hz sine wave to a square wave?

how can a perfect fourth interval be considered either consonant or dissonant?

Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?

Can we generate random numbers using irrational numbers like π and e?

Sub-subscripts in strings cause different spacings than subscripts

How to read αἱμύλιος or when to aspirate

Is there a writing software that you can sort scenes like slides in PowerPoint?

Can each chord in a progression create its own key?

Why React-Semantic-UI Transition not animating the Component?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I am having a Component which is a Modal alert. For animating the Modal, I am using the Transition from semantic-ui-react. But only a few animations(pulse,bounce, flash) are working and that too only while mounting of Component, and not working while I close the Modal. Also the duration property is also not working.

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition animation="fade" duration=1000 visible=open>
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=this.state.open
 onClose=this.close>

 <Modal.Content>
 <p>
 Hello user
 </p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

Why such weird behavior? What am I doing wrong?

reactjs semantic-ui-react react-transition-group

share|improve this question

asked Mar 8 at 12:20

TheCoderTheCoder

491420

add a comment | 

1

I am having a Component which is a Modal alert. For animating the Modal, I am using the Transition from semantic-ui-react. But only a few animations(pulse,bounce, flash) are working and that too only while mounting of Component, and not working while I close the Modal. Also the duration property is also not working.

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition animation="fade" duration=1000 visible=open>
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=this.state.open
 onClose=this.close>

 <Modal.Content>
 <p>
 Hello user
 </p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

Why such weird behavior? What am I doing wrong?

reactjs semantic-ui-react react-transition-group

share|improve this question

asked Mar 8 at 12:20

TheCoderTheCoder

491420

add a comment | 

I am having a Component which is a Modal alert. For animating the Modal, I am using the Transition from semantic-ui-react. But only a few animations(pulse,bounce, flash) are working and that too only while mounting of Component, and not working while I close the Modal. Also the duration property is also not working.

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition animation="fade" duration=1000 visible=open>
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=this.state.open
 onClose=this.close>

 <Modal.Content>
 <p>
 Hello user
 </p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

Why such weird behavior? What am I doing wrong?

reactjs semantic-ui-react react-transition-group

share|improve this question

asked Mar 8 at 12:20

TheCoderTheCoder

491420

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition animation="fade" duration=1000 visible=open>
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=this.state.open
 onClose=this.close>

 <Modal.Content>
 <p>
 Hello user
 </p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

share|improve this question

asked Mar 8 at 12:20

TheCoderTheCoder

491420

share|improve this question

asked Mar 8 at 12:20

TheCoderTheCoder

491420

asked Mar 8 at 12:20

TheCoderTheCoder

491420

asked Mar 8 at 12:20

TheCoderTheCoder

491420

1 Answer
1

active

oldest

votes

1

Modal is unmounting way before Transition can animate it, one way would be to let Transition unmount the Modal:

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition
 animation="fade"
 duration=1000
 unmountOnHide=true
 visible=open
 >
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=true
 onClose=this.close
 >
 <Modal.Content>
 <p>Hello user</p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

I hope it helps!

share|improve this answer

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes it worked. But, the Component never gets unmounted. I put the componentWillUnmount and it never gets called. Can you please try this.
  
  – TheCoder
  Mar 8 at 14:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alert component won't unmount, Modal will get unmounted, Transition component should be mounted for it to be able to apply the transitions it its children. What do you want to do, do you need to execute some logic once the modal get closed? You could simply use close method you've already defined in the component.
  
  – Carlos Frias
  Mar 8 at 15:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  IAlert component would be used by the application from anywhere. Would it be ok to let it be on the DOM, amd mounting/unmounting only the Modal?
  
  – TheCoder
  Mar 8 at 16:09
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It's OK. In fact, Transition component only mounts its children to the DOM, overriding their className to add transition css classes; nothing will be in the actual DOM if it has no children. Inspect the example I attached to the answer you'll see it by yourself.
  
  – Carlos Frias
  Mar 8 at 16:53
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063139%2fwhy-react-semantic-ui-transition-not-animating-the-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Modal is unmounting way before Transition can animate it, one way would be to let Transition unmount the Modal:

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition
 animation="fade"
 duration=1000
 unmountOnHide=true
 visible=open
 >
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=true
 onClose=this.close
 >
 <Modal.Content>
 <p>Hello user</p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

I hope it helps!

share|improve this answer

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes it worked. But, the Component never gets unmounted. I put the componentWillUnmount and it never gets called. Can you please try this.
  
  – TheCoder
  Mar 8 at 14:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alert component won't unmount, Modal will get unmounted, Transition component should be mounted for it to be able to apply the transitions it its children. What do you want to do, do you need to execute some logic once the modal get closed? You could simply use close method you've already defined in the component.
  
  – Carlos Frias
  Mar 8 at 15:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  IAlert component would be used by the application from anywhere. Would it be ok to let it be on the DOM, amd mounting/unmounting only the Modal?
  
  – TheCoder
  Mar 8 at 16:09
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It's OK. In fact, Transition component only mounts its children to the DOM, overriding their className to add transition css classes; nothing will be in the actual DOM if it has no children. Inspect the example I attached to the answer you'll see it by yourself.
  
  – Carlos Frias
  Mar 8 at 16:53
  

  
  
  
  

add a comment | 

1

Modal is unmounting way before Transition can animate it, one way would be to let Transition unmount the Modal:

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition
 animation="fade"
 duration=1000
 unmountOnHide=true
 visible=open
 >
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=true
 onClose=this.close
 >
 <Modal.Content>
 <p>Hello user</p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

I hope it helps!

share|improve this answer

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes it worked. But, the Component never gets unmounted. I put the componentWillUnmount and it never gets called. Can you please try this.
  
  – TheCoder
  Mar 8 at 14:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alert component won't unmount, Modal will get unmounted, Transition component should be mounted for it to be able to apply the transitions it its children. What do you want to do, do you need to execute some logic once the modal get closed? You could simply use close method you've already defined in the component.
  
  – Carlos Frias
  Mar 8 at 15:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  IAlert component would be used by the application from anywhere. Would it be ok to let it be on the DOM, amd mounting/unmounting only the Modal?
  
  – TheCoder
  Mar 8 at 16:09
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  It's OK. In fact, Transition component only mounts its children to the DOM, overriding their className to add transition css classes; nothing will be in the actual DOM if it has no children. Inspect the example I attached to the answer you'll see it by yourself.
  
  – Carlos Frias
  Mar 8 at 16:53
  

  
  
  
  

add a comment | 

Modal is unmounting way before Transition can animate it, one way would be to let Transition unmount the Modal:

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition
 animation="fade"
 duration=1000
 unmountOnHide=true
 visible=open
 >
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=true
 onClose=this.close
 >
 <Modal.Content>
 <p>Hello user</p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

I hope it helps!

share|improve this answer

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

class Alert extends React.Component 
 state = 
 open: true
 ;

 close = () => 
 this.setState(
 open: false
 );
 ;

 render() 
 const open = this.state;
 return (
 <Transition
 animation="fade"
 duration=1000
 unmountOnHide=true
 visible=open
 >
 <Modal
 size="mini"
 closeOnDimmerClick=false
 closeOnEscape=false
 open=true
 onClose=this.close
 >
 <Modal.Content>
 <p>Hello user</p>
 </Modal.Content>
 <Modal.Actions>
 <Button color="blue" onClick=this.close>
 Ok
 </Button>
 </Modal.Actions>
 </Modal>
 </Transition>
 );
 

share|improve this answer

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510

answered Mar 8 at 12:41

Carlos FriasCarlos Frias

426510