Leave animation not working

[poulakidask]

I have the following code. The enter animation works fine on Mount and when I dynamically enter new items. Though, the leave animation doesn't work as expected. The item does disappear but with no animation. Any thoughts ?

Edit: I added some console messages and I see that the leave animation doesn't fire at all.

        deleteThisTask() {
             Tasks.remove(this.props.task._id);
       }
        <VelocityTransitionGroup
                     enter={{animation: "slideDown",  begin: (element) => {console.log("enter");}}}
                      leave={{animation: "slideUp", begin: (element) => {console.log("leave");}}}
                    runOnMount>
            <li>
                <button onClick={this.deleteThisTask.bind(this)} >
                  &times;
                </button>

               {this.props.task.text}
             </li>
        </VelocityTransitionGroup>

[fionawhim]

Looking at your code, I get the impression that on delete you’re removing the VelocityTransitionGroup as well. You’ll need to keep it around.

TransitionGroups are able to run for their children that leave the DOM, but if they themselves are removed then they’re just gone.

[saniko]

Could you please elaborate? I have the same problem:

` <VelocityTransitionGroup enter={{ animation: { opacity: 1 }, duration: '500ms', }} leave={{ animation: { opacity: 0 }, duration: '500ms', }} runOnMount >

        </VelocityTransitionGroup>`

GalleryManger renders every 2 seconds What am I doing wrong?

Thanks

[fionawhim]

I can’t quite tell from your code. What are you seeing and what are you expecting?

VelocityTransitionGroup is for when you have direct children entering and leaving the DOM, which doesn’t seem to be the case with GalleryManager, at least in the code that you’ve provided.