Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 2x 2x 7x 7x 7x 7x 2x 2x 2x 2x | // @ts-check
import _ from "lodash";
import Anim from "./BaseAnimation";
import Vue from "vue";
/*
* CSS animations are easier to achieve in an inline-block that has no
* margins/padding, which is what this components does
*/
const component = /** @type {V.Constructor<any, any>} */(Vue).extend({
name: "BaseAnimationGroup",
props: {
tag: { type: String, default: "span" },
appear: { type: Boolean, default: true },
anim: { type: String, default: Anim.default }
},
computed: {
/**
* @returns {{in?: function, out?: function}}
*/
// @ts-ignore maybe we should limit anim props with an array of values
animation() { return Anim[this.anim] || {}; },
/**
* @returns {{appear: boolean}}
*/
options() { return { appear: this.appear }; }
},
methods: {
/**
* @param {Vue.VNode | Vue | Element } elt
* @param {function} done
*/
onEnter(elt /*: any */, done /*: () => any */) {
/** @type Element */
const eltDom = Anim.getDom(elt);
/** @type {{in?: function, out?: function}} */
const anim = _.get(Anim, eltDom.getAttribute("anim") || "", this.animation);
if (anim.in) {
anim.in(eltDom, this.options, done);
}
else E{
done();
}
},
/**
* @param {Vue.VNode | Vue | Element} elt
* @param {function} done
*/
onLeave(elt /*: any */, done /*: () => any */) {
/** @type Element */
const eltDom = Anim.getDom(elt);
/** @type {{in?: function, out?: function}} */
const anim = _.get(Anim, eltDom.getAttribute("anim") || "", this.animation);
if (anim.out) {
anim.out(eltDom, this.options, done);
}
else E{
done();
}
}
}
});
export default component;
|