vuikit/lib/core/transition.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { isString } from '../util/lang';
import { Animation } from '../util/animation';

var transition = {
  name: 'VkTransition',
  functional: true,
  props: {
    name: {
      type: [String, Array],
      required: true
    },
    duration: {
      type: Number
    },
    mode: {
      type: String,
      default: 'out-in'
    }
  },
  render: function render (h, ref) {
    var props = ref.props;
    var data = ref.data;
    var children = ref.children;
    var name = props.name;
    var duration = props.duration;
    var ref$1 = isString(name) ? [name, name] : name;
    var animationIn = ref$1[0];
    var animationOut = ref$1[1];
    var def = {
      props: {
        css: false,
        mode: props.mode
      },
      on: {
        enter: function enter (el, done) {
          animationIn
            ? Animation.in(el, ("uk-animation-" + animationIn), duration).then(done)
            : done();
        },
        leave: function leave (el, done) {
          animationOut
            ? Animation.out(el, ("uk-animation-" + animationOut), duration).then(done)
            : done();
        }
      }
    };
    return h('transition', def, children)
  }
}

export { transition as Transition };