Upgrade to Kdu v3

Guide

Enter/Leave & List Transitions

Overview

Kdu provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

On this page, we’ll only cover entering, leaving, and list transitions, but you can see the next section for managing state transitions.

Transitioning Single Elements/Components

Kdu provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:

This is what an example looks like in action:

<div id="demo">
  <button k-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p k-if="show">hello</p>
  </transition>
</div>
new Kdu({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

hello

When an element wrapped in a transition component is inserted or removed, this is what happens:

  1. Kdu will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.

  2. If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.

  3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Kdu’s concept of nextTick).

Transition Classes

There are six classes applied for enter/leave transitions.

  1. k-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.

  2. k-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

  3. k-enter-to: Ending state for enter. Added one frame after element is inserted (at the same time k-enter is removed), removed when transition/animation finishes.

  4. k-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.

  5. k-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.

  6. k-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time k-leave is removed), removed when the transition/animation finishes.

Each of these classes will be prefixed with the name of the transition. Here the k- prefix is the default when you use a <transition> element with no name. If you use <transition name="my-transition"> for example, then the k-enter class would instead be my-transition-enter.

k-enter-active and k-leave-active give you the ability to specify different easing curves for enter/leave transitions, which you’ll see an example of in the following section.

CSS Transitions

One of the most common transition types uses CSS transitions. Here’s an example:

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p k-if="show">hello</p>
  </transition>
</div>
new Kdu({
  el: '#example-1',
  data: {
    show: true
  }
})
/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

hello

CSS Animations

CSS animations are applied in the same way as CSS transitions, the difference being that k-enter is not removed immediately after the element is inserted, but on an animationend event.

Here’s an example, omitting prefixed CSS rules for the sake of brevity:

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p k-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>
new Kdu({
  el: '#example-2',
  data: {
    show: true
  }
})
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

Custom Transition Classes

You can also specify custom transition classes by providing the following attributes:

These will override the conventional class names. This is especially useful when you want to combine Kdu’s transition system with an existing CSS animation library, such as Animate.css.

Here’s an example:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p k-if="show">hello</p>
  </transition>
</div>
new Kdu({
  el: '#example-3',
  data: {
    show: true
  }
})

hello

Using Transitions and Animations Together

Kdu needs to attach event listeners in order to know when a transition has ended. It can either be transitionend or animationend, depending on the type of CSS rules applied. If you are only using one or the other, Kdu can automatically detect the correct type.

However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Kdu, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Kdu to care about in a type attribute, with a value of either animation or transition.

Explicit Transition Durations

In most cases, Kdu can automatically figure out when the transition has finished. By default, Kdu waits for the first transitionend or animationend event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element.

In such cases you can specify an explicit transition duration (in milliseconds) using the duration prop on the <transition> component:

<transition :duration="1000">...</transition>

You can also specify separate values for enter and leave durations:

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript Hooks

You can also define JavaScript hooks in attributes:

<transition
  k-on:before-enter="beforeEnter"
  k-on:enter="enter"
  k-on:after-enter="afterEnter"
  k-on:enter-cancelled="enterCancelled"

  k-on:before-leave="beforeLeave"
  k-on:leave="leave"
  k-on:after-leave="afterLeave"
  k-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
// ...
methods: {
  // --------
  // ENTERING
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // LEAVING
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // the done callback is optional when
  // used in combination with CSS
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled only available with k-show
  leaveCancelled: function (el) {
    // ...
  }
}

These hooks can be used in combination with CSS transitions/animations or on their own.

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately.

It’s also a good idea to explicitly add k-bind:css="false" for JavaScript-only transitions so that Kdu can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.

Now let’s dive into an example. Here’s a JavaScript transition using Velocity.js:

<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    k-on:before-enter="beforeEnter"
    k-on:enter="enter"
    k-on:leave="leave"
    k-bind:css="false"
  >
    <p k-if="show">
      Demo
    </p>
  </transition>
</div>
new Kdu({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

Demo

Transitions on Initial Render

If you also want to apply a transition on the initial render of a node, you can add the appear attribute:

<transition appear>
  <!-- ... -->
</transition>

By default, this will use the transitions specified for entering and leaving. If you’d like however, you can also specify custom CSS classes:

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

and custom JavaScript hooks:

<transition
  appear
  k-on:before-appear="customBeforeAppearHook"
  k-on:appear="customAppearHook"
  k-on:after-appear="customAfterAppearHook"
  k-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

In the example above, either appear attribute or k-on:appear hook will cause an appear transition.

Transitioning Between Elements

We discuss transitioning between components later, but you can also transition between raw elements using k-if/k-else. One of the most common two-element transitions is between a list container and a message describing an empty list:

<transition>
  <table k-if="items.length > 0">
    <!-- ... -->
  </table>
  <p k-else>Sorry, no items found.</p>
</transition>

This works well, but there’s one caveat to be aware of:

When toggling between elements that have the same tag name, you must tell Kdu that they are distinct elements by giving them unique key attributes. Otherwise, Kdu’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a <transition> component.

For example:

<transition>
  <button k-if="isEditing" key="save">
    Save
  </button>
  <button k-else key="edit">
    Edit
  </button>
</transition>

In these cases, you can also use the key attribute to transition between different states of the same element. Instead of using k-if and k-else, the above example could be rewritten as:

<transition>
  <button k-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

It’s actually possible to transition between any number of elements, either by using multiple k-ifs or binding a single element to a dynamic property. For example:

<transition>
  <button k-if="docState === 'saved'" key="saved">
    Edit
  </button>
  <button k-if="docState === 'edited'" key="edited">
    Save
  </button>
  <button k-if="docState === 'editing'" key="editing">
    Cancel
  </button>
</transition>

Which could also be written as:

<transition>
  <button k-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}

Transition Modes

There’s still one problem though. Try clicking the button below:

As it’s transitioning between the “on” button and the “off” button, both buttons are rendered - one transitioning out while the other transitions in. This is the default behavior of <transition> - entering and leaving happens simultaneously.

Sometimes this works great, like when transitioning items are absolutely positioned on top of each other:

And then maybe also translated so that they look like slide transitions:

Simultaneous entering and leaving transitions aren’t always desirable though, so Kdu offers some alternative transition modes:

Now let’s update the transition for our on/off buttons with out-in:

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

With one attribute addition, we’ve fixed that original transition without having to add any special styling.

The in-out mode isn’t used as often, but can sometimes be useful for a slightly different transition effect. Let’s try combining it with the slide-fade transition we worked on earlier:

Pretty cool, right?

Transitioning Between Components

Transitioning between components is even simpler - we don’t even need the key attribute. Instead, we wrap a dynamic component:

<transition name="component-fade" mode="out-in">
  <component k-bind:is="view"></component>
</transition>
new Kdu({
  el: '#transition-components-demo',
  data: {
    view: 'k-a'
  },
  components: {
    'k-a': {
      template: '<div>Component A</div>'
    },
    'k-b': {
      template: '<div>Component B</div>'
    }
  }
})
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.5.0 */ {
  opacity: 0;
}

List Transitions

So far, we’ve managed transitions for:

So what about for when we have a whole list of items we want to render simultaneously, for example with k-for? In this case, we’ll use the <transition-group> component. Before we dive into an example though, there are a few things that are important to know about this component:

List Entering/Leaving Transitions

Now let’s dive into an example, transitioning entering and leaving using the same CSS classes we’ve used previously:

<div id="list-demo">
  <button k-on:click="add">Add</button>
  <button k-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span k-for="item in items" k-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>
new Kdu({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.5.0 */ {
  opacity: 0;
  transform: translateY(30px);
}
{{ item }}

There’s one problem with this example. When you add or remove an item, the ones around it instantly snap into their new place instead of smoothly transitioning. We’ll fix that later.

List Move Transitions

The <transition-group> component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position. The only new concept you need to know to use this feature is the addition of the k-move class, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided name attribute and you can also manually specify a class with the move-class attribute.

This class is mostly useful for specifying the transition timing and easing curve, as you’ll see below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
  <button k-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li k-for="item in items" k-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>
new Kdu({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})
.flip-list-move {
  transition: transform 1s;
}
  • {{ item }}

    • This might seem like magic, but under the hood, Kdu is using an animation technique called FLIP to smoothly transition elements from their old position to their new position using transforms.

    We can combine this technique with our previous implementation to animate every possible change to our list!

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

    <div id="list-complete-demo" class="demo">
      <button k-on:click="shuffle">Shuffle</button>
      <button k-on:click="add">Add</button>
      <button k-on:click="remove">Remove</button>
      <transition-group name="list-complete" tag="p">
        <span
          k-for="item in items"
          k-bind:key="item"
          class="list-complete-item"
        >
          {{ item }}
        </span>
      </transition-group>
    </div>
    new Kdu({
      el: '#list-complete-demo',
      data: {
        items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
      },
      methods: {
        randomIndex: function () {
          return Math.floor(Math.random() * this.items.length)
        },
        add: function () {
          this.items.splice(this.randomIndex(), 0, this.nextNum++)
        },
        remove: function () {
          this.items.splice(this.randomIndex(), 1)
        },
        shuffle: function () {
          this.items = _.shuffle(this.items)
        }
      }
    })
    .list-complete-item {
      transition: all 1s;
      display: inline-block;
      margin-right: 10px;
    }
    .list-complete-enter, .list-complete-leave-to
    /* .list-complete-leave-active below version 2.5.0 */ {
      opacity: 0;
      transform: translateY(30px);
    }
    .list-complete-leave-active {
      position: absolute;
    }
    {{ item }}

    One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.

    These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be transitioned too:

    Lazy Sudoku

    Keep hitting the shuffle button until you win.

    {{ cell.number }}

    Staggering List Transitions

    By communicating with JavaScript transitions through data attributes, it’s also possible to stagger transitions in a list:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

    <div id="staggered-list-demo">
      <input k-model="query">
      <transition-group
        name="staggered-fade"
        tag="ul"
        k-bind:css="false"
        k-on:before-enter="beforeEnter"
        k-on:enter="enter"
        k-on:leave="leave"
      >
        <li
          k-for="(item, index) in computedList"
          k-bind:key="item.msg"
          k-bind:data-index="index"
        >{{ item.msg }}</li>
      </transition-group>
    </div>
    new Kdu({
      el: '#staggered-list-demo',
      data: {
        query: '',
        list: [
          { msg: 'Bruce Lee' },
          { msg: 'Jackie Chan' },
          { msg: 'Chuck Norris' },
          { msg: 'Jet Li' },
          { msg: 'Kung Fury' }
        ]
      },
      computed: {
        computedList: function () {
          var vm = this
          return this.list.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
          })
        }
      },
      methods: {
        beforeEnter: function (el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter: function (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(
              el,
              { opacity: 1, height: '1.6em' },
              { complete: done }
            )
          }, delay)
        },
        leave: function (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(
              el,
              { opacity: 0, height: 0 },
              { complete: done }
            )
          }, delay)
        }
      }
    })
  • {{ item.msg }}
    •

    Reusable Transitions

    Transitions can be reused through Kdu’s component system. To create a reusable transition, all you have to do is place a <transition> or <transition-group> component at the root, then pass any children into the transition component.

    Here’s an example using a template component:

    Kdu.component('my-special-transition', {
      template: '\
        <transition\
          name="very-special-transition"\
          mode="out-in"\
          k-on:before-enter="beforeEnter"\
          k-on:after-enter="afterEnter"\
        >\
          <slot></slot>\
        </transition>\
      ',
      methods: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    })

    And functional components are especially well-suited to this task:

    Kdu.component('my-special-transition', {
      functional: true,
      render: function (createElement, context) {
        var data = {
          props: {
            name: 'very-special-transition',
            mode: 'out-in'
          },
          on: {
            beforeEnter: function (el) {
              // ...
            },
            afterEnter: function (el) {
              // ...
            }
          }
        }
        return createElement('transition', data, context.children)
      }
    })

    Dynamic Transitions

    Yes, even transitions in Kdu are data-driven! The most basic example of a dynamic transition binds the name attribute to a dynamic property.

    <transition k-bind:name="transitionName">
      <!-- ... -->
    </transition>

    This can be useful when you’ve defined CSS transitions/animations using Kdu’s transition class conventions and want to switch between them.

    Really though, any transition attribute can be dynamically bound. And it’s not only attributes. Since event hooks are methods, they have access to any data in the context. That means depending on the state of your component, your JavaScript transitions can behave differently.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

    <div id="dynamic-fade-demo" class="demo">
      Fade In: <input type="range" k-model="fadeInDuration" min="0" k-bind:max="maxFadeDuration">
      Fade Out: <input type="range" k-model="fadeOutDuration" min="0" k-bind:max="maxFadeDuration">
      <transition
        k-bind:css="false"
        k-on:before-enter="beforeEnter"
        k-on:enter="enter"
        k-on:leave="leave"
      >
        <p k-if="show">hello</p>
      </transition>
      <button
        k-if="stop"
        k-on:click="stop = false; show = false"
      >Start animating</button>
      <button
        k-else
        k-on:click="stop = true"
      >Stop it!</button>
    </div>
    new Kdu({
      el: '#dynamic-fade-demo',
      data: {
        show: true,
        fadeInDuration: 1000,
        fadeOutDuration: 1000,
        maxFadeDuration: 1500,
        stop: true
      },
      mounted: function () {
        this.show = false
      },
      methods: {
        beforeEnter: function (el) {
          el.style.opacity = 0
        },
        enter: function (el, done) {
          var vm = this
          Velocity(el,
            { opacity: 1 },
            {
              duration: this.fadeInDuration,
              complete: function () {
                done()
                if (!vm.stop) vm.show = false
              }
            }
          )
        },
        leave: function (el, done) {
          var vm = this
          Velocity(el,
            { opacity: 0 },
            {
              duration: this.fadeOutDuration,
              complete: function () {
                done()
                vm.show = true
              }
            }
          )
        }
      }
    })
    Fade In: Fade Out:

    hello

    Finally, the ultimate way of creating dynamic transitions is through components that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination.

    ← Handling Edge Cases State Transitions →
    Caught a mistake or want to contribute to the documentation? Edit this on GitHub!