sd-transition

[yyx990803]

sd-transition comes in two flavors:

• CSS class toggle
• JavaScript functions
• tests

CSS class toggle

Use sd-transition-class. e.g:

<div class="test" sd-transition-class="fade">

.test {
    transition: opacity .5s linear;
}
.test.fade {
    opacity: 0;
}

Custom JavaScript transition functions

Use sd-transition and define them like this:

<div class="test" sd-transition="fade">

Seed.transition('fade',  {
    enter: function (el, attach) {
        // ...
        attach()
    },
    leave: function (el, detach) {
       // ...
       detach()
    }
})

Implementation notes

Transitions are triggered during append/remove operations of the following directives:

• sd-if
• sd-repeat (leave via vm.$destroy())
• sd-show

General procedure:

• enter
  • set to start state
  • append
  • trigger end state transition on next tick
• leave
  • trigger start state transition
  • wait transition duration / listen for transitionend
  • remove

[yyx990803]

956ca10