vue-flip-animation/dist/vue-flip.iife.js

# Installation

var vueFlip=function(m,h,L){"use strict";const H=d=>{const{el:f,isChild:p=!0,scrollContent:a=document.documentElement,onlyVisible:v=!0}=d;h.onMounted(()=>{y(p)}),h.onUpdated(()=>{y(p)});const l={},n={previous:null,rect:null};function y(t){const e=h.isRef(f)?f.value:f;t?x({el:e,scrollContent:a,onlyVisible:v}):F({el:e,scrollContent:a})}const C=t=>t.distanceLeft===0&&t.distanceTop===0&&t.disWidth===0&&t.disHeight===0,R=(t,e)=>{e.animate([{transform:`translate(${t.distanceLeft}px,${t.distanceTop}px) `},{transform:"none"}],{duration:500})};function _(t=document.documentElement){n.rect&&(n.previous=n.rect),n.rect=t.getBoundingClientRect()}const w=(t,e)=>e?n.rect||n.previous?!1:t.top>n.rect.height||t.bottom<0||t.left<0||t.left>n.rect.width:!0,b=function(t,e){const r=n.previous.top,i=n.rect.top,c=n.previous.left,o=n.rect.left;let u=0,s=0;return r!==i&&(u=i-r),c!==o&&(s=o-c),{distanceLeft:t.left-e.left+s,distanceTop:t.top-e.top+u,disWidth:t.width/e.width,disHeight:t.height/e.height}};function x(t){const{el:e,scrollContent:r,onlyVisible:i}=t,c=Array.prototype.slice.call(e.children);let o=!0;for(let u=0;u<c.length;u++){const s=c[u],g=s.dataset.key,B=s.getBoundingClientRect();if(o&&_(r),!w(B,i)&&g in l){const $=l[g],k=s.getBoundingClientRect(),T=b($,k);C(T)||R(T,s)}o&&(o=!1),l[g]=B}}function F(t){const{el:e,scrollContent:r}=t,i=e.getBoundingClientRect();if(_(r),l.previousRect){const c=l.previousRect,o=b(c,i);C(o)||R(o,e)}l.previousRect=i}},E=h.defineComponent({name:"vueFlip",props:{isChild:{type:Boolean,default:!0},scrollContent:{type:HTMLElement,default:document.documentElement},onlyVisible:{type:Boolean,default:!0}},setup(d){const f=h.ref(),{isChild:p,scrollContent:a,onlyVisible:v}=d;h.onMounted(()=>{debugger;y(p)}),h.onUpdated(()=>{y(p)});const l={},n={previous:null,rect:null};function y(t){const e=f.value;t?x({el:e,scrollContent:a,onlyVisible:v}):F({el:e,scrollContent:a})}const C=t=>t.distanceLeft===0&&t.distanceTop===0&&t.disWidth===0&&t.disHeight===0,R=(t,e)=>{e.animate([{transform:`translate(${t.distanceLeft}px,${t.distanceTop}px) `},{transform:"none"}],{duration:500})};function _(t=document.documentElement){n.rect&&(n.previous=n.rect),n.rect=t.getBoundingClientRect()}const w=(t,e)=>e?n.rect||n.previous?!1:t.top>n.rect.height||t.bottom<0||t.left<0||t.left>n.rect.width:!0,b=function(t,e){const r=n.previous.top,i=n.rect.top,c=n.previous.left,o=n.rect.left;let u=0,s=0;return r!==i&&(u=i-r),c!==o&&(s=o-c),{distanceLeft:t.left-e.left+s,distanceTop:t.top-e.top+u,disWidth:t.width/e.width,disHeight:t.height/e.height}};function x(t){const{el:e,scrollContent:r,onlyVisible:i}=t,c=Array.prototype.slice.call(e.children);let o=!0;for(let u=0;u<c.length;u++){const s=c[u],g=s.dataset.key,B=s.getBoundingClientRect();if(o&&_(r),!w(B,i)&&g in l){const $=l[g],k=s.getBoundingClientRect(),T=b($,k);C(T)||R(T,s)}o&&(o=!1),l[g]=B}}function F(t){const{el:e,scrollContent:r}=t,i=e.getBoundingClientRect();if(_(r),l.previousRect){const c=l.previousRect,o=b(c,i);C(o)||R(o,e)}l.previousRect=i}return{flipRef:f}}}),M=(d,f)=>{const p=d.__vccOpts||d;for(const[a,v]of f)p[a]=v;return p},A={ref:"flipRef"};function I(d,f,p,a,v,l){return L.openBlock(),L.createElementBlock("div",A,[L.renderSlot(d.$slots,"default")],512)}const V=M(E,[["render",I]]),W={install(d){d.component(V.name,V)}};return m.default=W,m.useFlip=H,m.vueFlip=V,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),m}({},vueDemi,vue);