LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code






  
  

AngularJS List / ng-animate with stagger

CSS
.example-animate-container {
    background: #ececec;
    list-style:none;
    margin:0;
    padding:0 10px;
}

.animate-repeat {
    line-height:40px;
    list-style:none;
    /*box-sizing:border-box;*/
    border-bottom: 1px solid white;
    -webkit-transition: 1s linear all;
    transition: 1s linear all;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
    opacity:0;
    max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
    opacity:1;
    max-height:40px;
}

/**
 * Stagger Leave (hide) animation
 */
.animate-repeat.ng-leave-stagger {
    /* this will have a 100ms delay between each successive leave animation */
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;

    /* in case the stagger doesn't work then these two values
     must be set to 0 to avoid an accidental CSS inheritance */
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}

/**
 * Stagger ENTER ANIMATION
 */
.animate-repeat.ng-enter-stagger {
    /* this will have a 100ms delay between each successive enter animation */
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;

    /* in case the stagger doesn't work then these two values
     must be set to 0 to avoid an accidental CSS inheritance */
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}
JS
    angular.module('App', ['ngAnimate']);
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:45

Related Codes

Pen ID
Pen ID
Pen ID