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 | 1x 4x 4x 4x 4x 4x 4x 4x 4x | // @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: "BaseAnimationBlock",
props: {
appear: { type: Boolean, default: true },
anim: { type: String, default: Anim.default },
mode: { type: String, default: "out-in" }, /* set to empty for simultaneous*/
options: { type: Object, default: null }
},
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} & any}
*/
animOptions() { return _.assign({ appear: this.appear }, this.options); }
},
methods: {
/**
* @param {Vue.VNode | Vue | Element } elt
* @param {function} done
*/
onEnter(elt, done) {
this.$emit("onEnter", elt);
if (this.animation.in) {
this.animation.in(elt, this.animOptions, done);
}
else E{
done();
}
},
/**
* @param {Vue.VNode | Vue | Element} elt
* @param {function} done
*/
onLeave(elt, done) {
this.$emit("onLeave", elt);
if (this.animation.out) {
this.animation.out(elt, this.animOptions, done);
}
else E{
done();
}
}
}
});
export default component;
|