Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Run consecutive animations with VelocityTransitionGroup #220

Open
saniko opened this issue Aug 13, 2017 · 0 comments
Open

Run consecutive animations with VelocityTransitionGroup #220

saniko opened this issue Aug 13, 2017 · 0 comments

Comments

@saniko
Copy link

saniko commented Aug 13, 2017

Hi,
I need to run consecutive animations after the "enter" animation compleat.
I would like to animate the staggered elements again and change their colour,
I need to keep the effect so after the elements appear one by one, they will change their color one by one.

  <VelocityTransitionGroup
        runOnMount
        component="div"
        className="menu"
        style={{ width: '900px' }}
        enter={{
          animation: 'transition.slideLeftIn',
          stagger: '200',
          duration: '400',
          complete: (element) => {
              element.map((elm, index)=>{
                setTimeout(function(){
                 elm.style.fill = '#334455'                 
                }, 200);   
                
              })            
          },
        }}
        leave={{ animation: 'transition.slideLeftOut', backwards: '150' }}
      >
        {menuItems}

      </VelocityTransitionGroup>

Would you please advise about the best way.

Best.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant