@progress/kendo-vue-animation/AnimationChild.js

Kendo UI for Vue Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),D=require("./util.js"),b=require("@progress/kendo-vue-common"),n=D.styles,A=i.defineComponent({props:{in:Boolean,transitionName:{type:String,required:!0},transitionStyle:Object,componentChildClassName:[Array],className:String,appear:{type:Boolean,default:!0},enter:{type:Boolean,default:!0},exit:{type:Boolean,default:!0},transitionEnterDuration:Number,transitionExitDuration:Number,mountOnEnter:Boolean,unmountOnExit:Boolean,animationEnteringStyle:Object,animationEnteredStyle:Object,animationExitingStyle:Object,animationExitedStyle:Object,onBeforeenter:Function,onEntering:Function,onEntered:Function,onExit:Function,onExiting:Function,onExited:Function},created:function(){this.animationStep=""},setup:function(){return{elementRef:i.ref(null)}},mounted(){this._element=this.elementRef||null},computed:{element(){return this._element}},methods:{handleBeforeEnter(e){this.$emit("beforeenter",{animatedElement:e,target:this})},handleEnter(e){this.animationStep="entering",this.$emit("entering",{animatedElement:e,target:this})},handleAfterEnter(e){this.animationStep="entered",this.$emit("entered",{animatedElement:e,target:this})},handleBeforeLeave(e){this.$emit("exit",{animatedElement:e,target:this})},handleLeave(e){this.animationStep="exiting",this.$emit("exiting",{animatedElement:e,target:this})},handleAfterLeave(e){this.animationStep="exited",this.$emit("exited",{animatedElement:e,target:this})}},render(){const{appear:e,enter:s,exit:l,transitionName:t,transitionEnterDuration:m,transitionExitDuration:d,className:O,componentChildClassName:h,mountOnEnter:F,unmountOnExit:L,animationEnteringStyle:u,animationEnteredStyle:c,animationExitingStyle:p,animationExitedStyle:E,...N}=this.$props,f=b.getDefaultSlots(this),o=e,x=i.Transition,S=[h,n["child-animation-container"]];let a=s?m:0,r=l?d:0;const g={transitionDelay:"0ms",transitionDuration:o?`${a}ms`:`${r}ms`,...this.$props.transitionStyle},y={entering:{transitionDuration:`${a}ms`,...u},entered:{...c},exiting:{transitionDuration:`${r}ms`,...p},exited:{...E}};let $=[g,y[this.animationStep]];const v={enter:a,leave:r},C=[o?i.h("div",{style:$,class:S,ref:B=>{this.elementRef=B}},[f]):null];return i.h(x,{duration:v,name:t,appear:e,appearFromClass:n[`${t}-appear`]||`${t}-appear`,enterFromClass:n[`${t}-enter`]||`${t}-enter`,leaveFromClass:n[`${t}-exit`]||`${t}-exit`,appearToClass:n[`${t}-appear-active`]||`${t}-appear-active`,enterToClass:n[`${t}-enter-active`]||`${t}-enter-active`,leaveToClass:n[`${t}-exit-active`]||`${t}-exit-active`,onBeforeEnter:this.handleBeforeEnter,onEnter:this.handleEnter,onAfterEnter:this.handleAfterEnter,onBeforeLeave:this.handleBeforeLeave,onLeave:this.handleLeave,onAfterLeave:this.handleAfterLeave},()=>C)}});exports.AnimationChild=A;