CODEWITHSUNDEEP
cssangularionic-frameworkionic2ionic3
ashley
ashley

Reputation: 1038

Animating an ionic sliding list

Current I am using some animations with my sliding ionic list such as sliding in from left to right and content from fading in as per this tutorial. https://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/

@-webkit-keyframes animateInPrimary {
  0% {
    -webkit-transform: translate3d(-100%,0,0);
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes animateInSecondary{

  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-in-primary {
    -webkit-animation: animateInPrimary;
    animation: animateInPrimary;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}

.animate-in-secondary {
    -webkit-animation: animateInSecondary ease-in 1;
    animation: animateInSecondary ease-in 1;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}

Now I would want the ion-items to slide one after the other. I think I have to use the css property -webkit-animation-delay. But i am not sure where to insert it. Hope someone can help. Thanks, Ashley

Upvotes: 0

Views: 1158

Answers (1)

rhysclay
rhysclay

Reputation: 1683

If you wanted to do this with CSS animations then what you would need to do is add an incremental class to each list item and then stagger your animations accordingly as demonstrated here: CSS Animations with delay for each child element

The easier way to do this is with the built in stagger function of the animations module - take a look at this article: https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#

Upvotes: 0

Related Questions