vue-template-compiler 2.0.0-beta.2

on Node.js NPM

Breaking Changes

Transition API Change

Unfortunately, we have to make some breaking changes to the transition API to ensure it works as expected in all cases when combined with the virtual-dom rendering layer. The good news is that the new API makes transition effects more declarative and flexible, and brings in a few new features.

• The <transition> component

  All single-element transition effects are now applied by wrapping the target element/component with the <transition> built-in component. This is an abstract component, which means it does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.

  The simplest usage example:

  <transition>
    <div v-if="ok">toggled content</div>
  </transition>

  The component defines a number of props and events that maps directly to the old transition definition options:

  Props

  • name: String

    Used to automatically generate transition CSS class names. e.g. name: 'fade' will auto expand to .fade-enter, .fade-enter-active, etc. Defaults to "v".

  • appear: Boolean

    Whether to apply transition on initial render. Defaults to false.

  • css: Boolean

    Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.

  • mode: String

    Controls the timing sequence of leaving/entering transitions. Available modes are "out-in" and "in-out"; defaults to simultaneous.

  • enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String

    Individually configure transition CSS classes.

  Example applying transition to dynamic components:

  <transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
  </transition>

  Events

  Corresponds to the JavaScript hooks available in 1.x API.

  • before-enter
  • enter
  • after-enter
  • before-leave
  • leave
  • after-leave
  • before-appear
  • appear
  • after-appear

  Example:

  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>

  When the entering transition completes, the component's transitionComplete method will be called with the transitioned DOM element as the argument.

  Difference from beta.1

  The second vm argument has been removed, since now the hooks must be component methods and naturally has access to the owner component's this context. For enter and leave hooks, the presence of cb as the second argument indicates the user wants explicit control of the ending timing of the transition.

• The <transition-group> component

  All multi-element transition effects are now applied by wrapping the elements with the <transition-group> built-in component. It exposes the same props and events as <transition> does. The difference being that:

  1. Unlike <transition>, <transition-group> renders a real DOM element. By default it renders a <span>, and you can configure what element is should render via the tag prop. You can also use it with the is attribute, e.g. <ul is="transition-group">.
  2. <transition-group> does not support the mode prop.
  3. Every child in a <transition-group> must be uniquely keyed.

  Example:

  <transition-group tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>

  Moving Transitions

  <transition-group> supports moving transitions via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the name prop or configured with the moveClass prop). If the CSS transform property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.

  See a live demo here.

• Creating Reusable Transitions

  Now that transitions are applied via components, they are no longer considered an asset type, so the global Vue.transition() method and the transition option are both deprecated. You can just configure the transition inline with component props and events. But how do we create reusable transition effects now, especially those with custom JavaScript hooks? Well, the answer is creating your own transition components (they are particularly suitable as functional components):

  Vue.component('fade', {
    functional: true,
    render (createElement, { children }) {
      const data = {
        props: {
          name: 'fade'
        },
        on: {
          beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
          afterEnter () { /* ... */ }
        }
      }
      return createElement('transition', data, children)
    }
  })

  You can then use it like this:

  <fade>
    <div v-if="ok">toggled content</div>
  </fade>

Fixed

• #3259 fix slot names incorrectly passed down to nested children
• Fix incorrect component warning for <body> and <aside> (@tommyZZM)