import{s as re,f,a as h,l as de,g as d,D as k,c as m,h as A,d as r,m as ye,j as y,i as p,r as v,w as fe,n as qe,u as Z,x as Ne,o as Oe,ag as Ge,e as W,G as R,C as he,ae as ge,af as Ie,k as Te}from"./scheduler.2f9f1739.js";import{S as je,i as De,g as me,t as ee,c as Fe,a as te,h as _e,f as Ve,j as Ue,b as Be,d as ke,m as xe,e as be}from"./index.f9f1dac6.js";import{g as ze,a as Me}from"./styles.a749dd55.js";import{M as We}from"./MarkdownLayout.50a9a114.js";import{s as He,b as Re,a as ve}from"./index.63ca82d4.js";import{L as Ke}from"./link.4e908ad9.js";function Qe(c){let s=c[0],t,l=Se(c);return{c(){l.c(),t=W()},l(e){l.l(e),t=W()},m(e,n){l.m(e,n),p(e,t,n)},p(e,n){n&1&&re(s,s=e[0])?(me(),ee(l,1,1,Z),Fe(),l=Se(e),l.c(),te(l,1),l.m(t.parentNode,t)):l.p(e,n)},d(e){e&&r(t),l.d(e)}}}function Xe(c){let s=c[0],t,l=Le(c);return{c(){l.c(),t=W()},l(e){l.l(e),t=W()},m(e,n){l.m(e,n),p(e,t,n)},p(e,n){n&1&&re(s,s=e[0])?(me(),ee(l,1,1,Z),Fe(),l=Le(e),l.c(),te(l,1),l.m(t.parentNode,t)):l.p(e,n)},d(e){e&&r(t),l.d(e)}}}function Ye(c){let s=c[0],t,l=Ae(c);return{c(){l.c(),t=W()},l(e){l.l(e),t=W()},m(e,n){l.m(e,n),p(e,t,n)},p(e,n){n&1&&re(s,s=e[0])?(me(),ee(l,1,1,Z),Fe(),l=Ae(e),l.c(),te(l,1),l.m(t.parentNode,t)):l.p(e,n)},d(e){e&&r(t),l.d(e)}}}function Je(c){let s=c[0],t,l=Ee(c);return{c(){l.c(),t=W()},l(e){l.l(e),t=W()},m(e,n){l.m(e,n),p(e,t,n)},p(e,n){n&1&&re(s,s=e[0])?(me(),ee(l,1,1,Z),Fe(),l=Ee(e),l.c(),te(l,1),l.m(t.parentNode,t)):l.p(e,n)},d(e){e&&r(t),l.d(e)}}}function Se(c){let s,t,l,e,n;return{c(){s=f("div"),t=f("img"),this.h()},l(o){s=d(o,"DIV",{});var i=A(s);t=d(i,"IMG",{src:!0,alt:!0,class:!0}),i.forEach(r),this.h()},h(){R(t.src,l=c[0])||y(t,"src",l),y(t,"alt",""),y(t,"class","svelte-19mneho")},m(o,i){p(o,s,i),v(s,t),n=!0},p(o,i){(!n||i&1&&!R(t.src,l=o[0]))&&y(t,"src",l)},i(o){n||(o&&he(()=>{n&&(e||(e=_e(s,He,{axis:"x"},!0)),e.run(1))}),n=!0)},o(o){o&&(e||(e=_e(s,He,{axis:"x"},!1)),e.run(0)),n=!1},d(o){o&&r(s),o&&e&&e.end()}}}function Le(c){let s,t,l,e;return{c(){s=f("div"),t=f("img"),this.h()},l(n){s=d(n,"DIV",{});var o=A(s);t=d(o,"IMG",{src:!0,alt:!0,class:!0}),o.forEach(r),this.h()},h(){R(t.src,l=c[0])||y(t,"src",l),y(t,"alt",""),y(t,"class","svelte-19mneho")},m(n,o){p(n,s,o),v(s,t)},p(n,o){o&1&&!R(t.src,l=n[0])&&y(t,"src",l)},i(n){n&&(e||he(()=>{e=Ve(s,Re,{axis:"x"}),e.start()}))},o:Z,d(n){n&&r(s)}}}function Ae(c){let s,t,l,e,n;return{c(){s=f("div"),t=f("img"),this.h()},l(o){s=d(o,"DIV",{});var i=A(s);t=d(i,"IMG",{src:!0,alt:!0,class:!0}),i.forEach(r),this.h()},h(){R(t.src,l=c[0])||y(t,"src",l),y(t,"alt",""),y(t,"class","svelte-19mneho")},m(o,i){p(o,s,i),v(s,t),n=!0},p(o,i){(!n||i&1&&!R(t.src,l=o[0]))&&y(t,"src",l)},i(o){n||(o&&he(()=>{n&&(e||(e=_e(s,ve,{axis:"y"},!0)),e.run(1))}),n=!0)},o(o){o&&(e||(e=_e(s,ve,{axis:"y"},!1)),e.run(0)),n=!1},d(o){o&&r(s),o&&e&&e.end()}}}function Ee(c){let s,t,l,e,n,o;return{c(){s=f("div"),t=f("img"),this.h()},l(i){s=d(i,"DIV",{});var x=A(s);t=d(x,"IMG",{src:!0,alt:!0,class:!0}),x.forEach(r),this.h()},h(){R(t.src,l=c[0])||y(t,"src",l),y(t,"alt",""),y(t,"class","svelte-19mneho")},m(i,x){p(i,s,x),v(s,t),o=!0},p(i,x){(!o||x&1&&!R(t.src,l=i[0]))&&y(t,"src",l)},i(i){o||(i&&he(()=>{o&&(n&&n.end(1),e=Ve(s,ve,{axis:"x"}),e.start())}),o=!0)},o(i){e&&e.invalidate(),i&&(n=Ue(s,ve,{axis:"y"})),o=!1},d(i){i&&r(s),i&&n&&n.end()}}}function Ze(c){let s,t="Interactive demo",l,e,n,o,i,x="Carousel Demo",N,F,M,U="Slide X",B,b,se="Slide Y",H,$,D="Scale in",le,I,V="Fade in",ne,S,E,q,z,L,ae,K;function T(_,C){if(_[1]=="slidex")return Je;if(_[1]=="slidey")return Ye;if(_[1]=="fade")return Xe;if(_[1]=="scale")return Qe}let O=T(c),g=O&&O(c);return{c(){s=f("div"),s.textContent=t,l=h(),e=f("div"),n=f("div"),o=f("div"),i=f("h4"),i.textContent=x,N=h(),F=f("div"),M=f("button"),M.textContent=U,B=h(),b=f("button"),b.textContent=se,H=h(),$=f("button"),$.textContent=D,le=h(),I=f("button"),I.textContent=V,ne=h(),S=f("div"),g&&g.c(),E=h(),q=f("p"),z=de("*Current animation : "),L=de(c[1]),this.h()},l(_){s=d(_,"DIV",{class:!0,"data-svelte-h":!0}),k(s)!=="svelte-1cl4j2p"&&(s.textContent=t),l=m(_),e=d(_,"DIV",{class:!0});var C=A(e);n=d(C,"DIV",{class:!0});var G=A(n);o=d(G,"DIV",{class:!0});var w=A(o);i=d(w,"H4",{class:!0,"data-svelte-h":!0}),k(i)!=="svelte-y46nhk"&&(i.textContent=x),N=m(w),F=d(w,"DIV",{class:!0});var P=A(F);M=d(P,"BUTTON",{class:!0,"data-svelte-h":!0}),k(M)!=="svelte-2k431u"&&(M.textContent=U),B=m(P),b=d(P,"BUTTON",{class:!0,"data-svelte-h":!0}),k(b)!=="svelte-noxbvk"&&(b.textContent=se),H=m(P),$=d(P,"BUTTON",{class:!0,"data-svelte-h":!0}),k($)!=="svelte-153w5n3"&&($.textContent=D),le=m(P),I=d(P,"BUTTON",{class:!0,"data-svelte-h":!0}),k(I)!=="svelte-zliziv"&&(I.textContent=V),P.forEach(r),w.forEach(r),ne=m(G),S=d(G,"DIV",{class:!0});var Q=A(S);g&&g.l(Q),Q.forEach(r),G.forEach(r),E=m(C),q=d(C,"P",{class:!0});var j=A(q);z=ye(j,"*Current animation : "),L=ye(j,c[1]),j.forEach(r),C.forEach(r),this.h()},h(){y(s,"class","w-full px-4 py-2 rounded-xl bg-orange-100 dark:bg-stone-900"),y(i,"class","title svelte-19mneho"),y(M,"class","bg-orang dark:bg-dark rounded-xl text-black svelte-19mneho"),y(b,"class","bg-orang dark:bg-dark rounded-xl text-black svelte-19mneho"),y($,"class","bg-orang dark:bg-dark rounded-xl text-black svelte-19mneho"),y(I,"class","bg-orang dark:bg-dark rounded-xl text-black svelte-19mneho"),y(F,"class","flex flex-col gap-2"),y(o,"class","flex flex-col gap-4"),y(S,"class","center svelte-19mneho"),y(n,"class","flex flex-col md:flex-row gap-4 items-center justify-center"),y(q,"class","absolute bottom-0"),y(e,"class","container relative bg-orange-100 flex items-center justify-center gap-4 flex-col dark:bg-stone-900 rounded-3xl svelte-19mneho")},m(_,C){p(_,s,C),p(_,l,C),p(_,e,C),v(e,n),v(n,o),v(o,i),v(o,N),v(o,F),v(F,M),v(F,B),v(F,b),v(F,H),v(F,$),v(F,le),v(F,I),v(n,ne),v(n,S),g&&g.m(S,null),v(e,E),v(e,q),v(q,z),v(q,L),ae||(K=[fe(M,"click",c[3]),fe(b,"click",c[4]),fe($,"click",c[5]),fe(I,"click",c[6])],ae=!0)},p(_,[C]){O===(O=T(_))&&g?g.p(_,C):(g&&g.d(1),g=O&&O(_),g&&(g.c(),g.m(S,null))),C&2&&qe(L,_[1])},i:Z,o:Z,d(_){_&&(r(s),r(l),r(e)),g&&g.d(),ae=!1,Ne(K)}}}function et(c,s,t){let l=["https://images.pexels.com/photos/6044185/pexels-photo-6044185.jpeg","https://images.pexels.com/photos/5691695/pexels-photo-5691695.jpeg","https://images.pexels.com/photos/4577525/pexels-photo-4577525.jpeg","https://images.pexels.com/photos/4541011/pexels-photo-4541011.jpeg"],e=0,n=l[e],o;Oe(()=>{o=setInterval(()=>{e=(e+1)%l.length,t(0,n=l[e])},3e3)}),Ge(()=>{clearInterval(o)});let i="slidey";function x(B,b){console.log(B.target),t(1,i=b),clearInterval(o),o=setInterval(()=>{e=(e+1)%l.length,t(0,n=l[e])},3e3)}return[n,i,x,B=>{x(B,"slidex")},B=>{x(B,"slidey")},B=>{x(B,"scale")},B=>{x(B,"fade")}]}class tt extends je{constructor(s){super(),De(this,s,et,Ze,re,{})}}function st(c){let s;return{c(){s=de("here")},l(t){s=ye(t,"here")},m(t,l){p(t,s,l)},d(t){t&&r(s)}}}function lt(c){let s,t="Svelte is amazing, and in this article we will go through how you can animation/transition between components in svelte.",l,e,n="If you’re to do this with CSS, you will find it almost impossible if what you’re changing is not a CSS property. With the recent development in view-transitions-api, we’re moving to a phase were it going to become easier to do this.",o,i,x="How?",N,F,M="we can achieve this with the <code>{#key …}</code> block, which is part of the super useful list of logic blocks Svelte provides.",U,B,b,se,H,$,D,le="The <code>{#key …}</code> is not built specifically for animating or transition, but it <strong>listens</strong> to changes in the <strong>expression changes</strong> and it destroys and recreate it content whenever the <strong>expression changes</strong> changes.",I,V,ne="With this advantage, we can create a transition either using svelte built in transitions capabilities or make a custom one with CSS.",S,E,q="<strong>Example</strong>",z,L,ae="This simple syntax for this is:",K,T,O=`<code><span class="line"><span style="color: #B392F0">{#</span><span style="color: #F97583">key</span><span style="color: #B392F0"> value}</span></span> <span class="line"><span style="color: #B392F0"> <</span><span style="color: #FFAB70">div</span><span style="color: #B392F0"> </span><span style="color: #F97583">transition</span><span style="color: #B392F0">:fade>{value}</</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span> <span class="line"><span style="color: #B392F0">{/</span><span style="color: #F97583">key</span><span style="color: #B392F0">}</span></span></code>`,g,_,C="Here we are going to wrap our content around the key and we’re going apply a slide transition whenever the <code>image</code> changes.",G,w,P=`<code><span class="line"><span style="color: #B392F0"><</span><span style="color: #FFAB70">script</span><span style="color: #B392F0">></span></span> <span class="line"><span style="color: #B392F0"> </span><span style="color: #F97583">let</span><span style="color: #B392F0"> images </span><span style="color: #F97583">=</span><span style="color: #B392F0"> [</span><span style="color: #FFAB70">'/carousel.png'</span><span style="color: #BBBBBB">,</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">'/carousel1.png'</span><span style="color: #BBBBBB">,</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">'/carousel2.png'</span><span style="color: #BBBBBB">,</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">'/carousel3.png'</span><span style="color: #B392F0">];</span></span> <span class="line"></span> <span class="line"><span style="color: #B392F0"> </span><span style="color: #F97583">let</span><span style="color: #B392F0"> currentIndex </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">0</span><span style="color: #B392F0">;</span></span> <span class="line"><span style="color: #B392F0"> </span><span style="color: #F97583">let</span><span style="color: #B392F0"> image </span><span style="color: #F97583">=</span><span style="color: #B392F0"> images[currentIndex];</span></span> <span class="line"></span> <span class="line"><span style="color: #B392F0"> onMount(() </span><span style="color: #F97583">=></span><span style="color: #B392F0"> {</span></span> <span class="line"><span style="color: #B392F0"> </span><span style="color: #6B737C">// Start the carousel</span></span> <span class="line"><span style="color: #B392F0"> interval </span><span style="color: #F97583">=</span><span style="color: #B392F0"> setInterval(() </span><span style="color: #F97583">=></span><span style="color: #B392F0"> {</span></span> <span class="line"><span style="color: #B392F0"> currentIndex </span><span style="color: #F97583">=</span><span style="color: #B392F0"> (currentIndex </span><span style="color: #F97583">+</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">1</span><span style="color: #B392F0">) </span><span style="color: #F97583">%</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">images</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">length</span><span style="color: #B392F0">;</span></span> <span class="line"><span style="color: #B392F0"> image </span><span style="color: #F97583">=</span><span style="color: #B392F0"> images[image];</span></span> <span class="line"><span style="color: #B392F0"> }</span><span style="color: #BBBBBB">,</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">3000</span><span style="color: #B392F0">);</span></span> <span class="line"><span style="color: #B392F0"> });</span></span> <span class="line"><span style="color: #B392F0"></</span><span style="color: #FFAB70">script</span><span style="color: #B392F0">></span></span> <span class="line"></span> <span class="line"><span style="color: #B392F0"><</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span> <span class="line"><span style="color: #B392F0"> <</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span> <span class="line highlight-line"><span style="color: #B392F0"> {#</span><span style="color: #F97583">key</span><span style="color: #B392F0"> image}</span></span> <span class="line highlight-line"><span style="color: #B392F0"> <</span><span style="color: #FFAB70">div</span><span style="color: #B392F0"> </span><span style="color: #F97583">transition</span><span style="color: #B392F0">:slide></span></span> <span class="line"><span style="color: #B392F0"> <</span><span style="color: #FFAB70">img</span><span style="color: #B392F0"> src</span><span style="color: #F97583">=</span><span style="color: #B392F0">{image} alt</span><span style="color: #F97583">=</span><span style="color: #FFAB70">""</span><span style="color: #B392F0"> /></span></span> <span class="line"><span style="color: #B392F0"> </</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span> <span class="line highlight-line"><span style="color: #B392F0"> {/</span><span style="color: #F97583">key</span><span style="color: #B392F0">}</span></span> <span class="line"><span style="color: #B392F0"> </</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span> <span class="line"><span style="color: #B392F0"></</span><span style="color: #FFAB70">div</span><span style="color: #B392F0">></span></span></code>`,Q,j,ie,X,Ce="One thing I want to clarify is that, in both examples, no just values can be passed to the key, you can also feed it an <strong>expression</strong>, and will perform the same.",pe,Y,we="Svelte is beautiful, I love it, if you’re here, you definitely love it too. Share the knowledge with others that might find it useful.",ce,J,$e="<strong>Peace</strong> ✌️",ue;return H=new Ke({props:{href:"https://svelte.dev/docs/logic-blocks",rel:"nofollow",$$slots:{default:[st]},$$scope:{ctx:c}}}),j=new tt({}),{c(){s=f("p"),s.textContent=t,l=h(),e=f("p"),e.textContent=n,o=h(),i=f("h2"),i.textContent=x,N=h(),F=f("p"),F.innerHTML=M,U=h(),B=f("blockquote"),b=f("p"),se=de("view the complete list of logic blocks "),Be(H.$$.fragment),$=h(),D=f("p"),D.innerHTML=le,I=h(),V=f("p"),V.textContent=ne,S=h(),E=f("p"),E.innerHTML=q,z=h(),L=f("p"),L.textContent=ae,K=h(),T=f("pre"),T.innerHTML=O,g=h(),_=f("p"),_.innerHTML=C,G=h(),w=f("pre"),w.innerHTML=P,Q=h(),Be(j.$$.fragment),ie=h(),X=f("p"),X.innerHTML=Ce,pe=h(),Y=f("p"),Y.textContent=we,ce=h(),J=f("p"),J.innerHTML=$e,this.h()},l(a){s=d(a,"P",{"data-svelte-h":!0}),k(s)!=="svelte-1l2j0eo"&&(s.textContent=t),l=m(a),e=d(a,"P",{"data-svelte-h":!0}),k(e)!=="svelte-pgx0nh"&&(e.textContent=n),o=m(a),i=d(a,"H2",{"data-svelte-h":!0}),k(i)!=="svelte-1iilcxp"&&(i.textContent=x),N=m(a),F=d(a,"P",{"data-svelte-h":!0}),k(F)!=="svelte-17pymnh"&&(F.innerHTML=M),U=m(a),B=d(a,"BLOCKQUOTE",{});var u=A(B);b=d(u,"P",{});var oe=A(b);se=ye(oe,"view the complete list of logic blocks "),ke(H.$$.fragment,oe),oe.forEach(r),u.forEach(r),$=m(a),D=d(a,"P",{"data-svelte-h":!0}),k(D)!=="svelte-w36nis"&&(D.innerHTML=le),I=m(a),V=d(a,"P",{"data-svelte-h":!0}),k(V)!=="svelte-dt2wns"&&(V.textContent=ne),S=m(a),E=d(a,"P",{"data-svelte-h":!0}),k(E)!=="svelte-917y1v"&&(E.innerHTML=q),z=m(a),L=d(a,"P",{"data-svelte-h":!0}),k(L)!=="svelte-vtdjo4"&&(L.textContent=ae),K=m(a),T=d(a,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),k(T)!=="svelte-1exhld1"&&(T.innerHTML=O),g=m(a),_=d(a,"P",{"data-svelte-h":!0}),k(_)!=="svelte-eccqch"&&(_.innerHTML=C),G=m(a),w=d(a,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),k(w)!=="svelte-l0kkvy"&&(w.innerHTML=P),Q=m(a),ke(j.$$.fragment,a),ie=m(a),X=d(a,"P",{"data-svelte-h":!0}),k(X)!=="svelte-1wvyu79"&&(X.innerHTML=Ce),pe=m(a),Y=d(a,"P",{"data-svelte-h":!0}),k(Y)!=="svelte-842u0g"&&(Y.textContent=we),ce=m(a),J=d(a,"P",{"data-svelte-h":!0}),k(J)!=="svelte-bssgcm"&&(J.innerHTML=$e),this.h()},h(){y(T,"class","shiki min-dark"),Te(T,"background-color","#1f1f1f"),y(T,"tabindex","0"),y(w,"class","shiki min-dark"),Te(w,"background-color","#1f1f1f"),y(w,"tabindex","0")},m(a,u){p(a,s,u),p(a,l,u),p(a,e,u),p(a,o,u),p(a,i,u),p(a,N,u),p(a,F,u),p(a,U,u),p(a,B,u),v(B,b),v(b,se),xe(H,b,null),p(a,$,u),p(a,D,u),p(a,I,u),p(a,V,u),p(a,S,u),p(a,E,u),p(a,z,u),p(a,L,u),p(a,K,u),p(a,T,u),p(a,g,u),p(a,_,u),p(a,G,u),p(a,w,u),p(a,Q,u),xe(j,a,u),p(a,ie,u),p(a,X,u),p(a,pe,u),p(a,Y,u),p(a,ce,u),p(a,J,u),ue=!0},p(a,u){const oe={};u&2&&(oe.$$scope={dirty:u,ctx:a}),H.$set(oe)},i(a){ue||(te(H.$$.fragment,a),te(j.$$.fragment,a),ue=!0)},o(a){ee(H.$$.fragment,a),ee(j.$$.fragment,a),ue=!1},d(a){a&&(r(s),r(l),r(e),r(o),r(i),r(N),r(F),r(U),r(B),r($),r(D),r(I),r(V),r(S),r(E),r(z),r(L),r(K),r(T),r(g),r(_),r(G),r(w),r(Q),r(ie),r(X),r(pe),r(Y),r(ce),r(J)),be(H),be(j,a)}}}function nt(c){let s,t;const l=[c[0],Pe];let e={$$slots:{default:[lt]},$$scope:{ctx:c}};for(let n=0;n<l.length;n+=1)e=ge(e,l[n]);return s=new We({props:e}),{c(){Be(s.$$.fragment)},l(n){ke(s.$$.fragment,n)},m(n,o){xe(s,n,o),t=!0},p(n,[o]){const i=o&1?ze(l,[o&1&&Me(n[0]),o&0&&Me(Pe)]):{};o&2&&(i.$$scope={dirty:o,ctx:n}),s.$set(i)},i(n){t||(te(s.$$.fragment,n),t=!0)},o(n){ee(s.$$.fragment,n),t=!1},d(n){be(s,n)}}}const Pe={title:"How to animate state change in Svelte",description:"If you’re to do this with CSS, you will find it almost impossible if what you’re changing is not a CSS property. With the recent development in view-transitions-api, we’re moving to a phase were it going to become easier to do this.",date:"2024-01-11",lastmod:"2024-01-12",categories:["Interactive blog","svelte","transition","tips"],thumbnail:"https://cdn.hashnode.com/res/hashnode/image/upload/v1705009291855/6247f945-a075-4916-8af7-9ae1ca31f235.png",label:"Interactive blog",published:!0};function at(c,s,t){return c.$$set=l=>{t(0,s=ge(ge({},s),Ie(l)))},s=Ie(s),[s]}class ft extends je{constructor(s){super(),De(this,s,at,nt,re,{})}}export{ft as default,Pe as metadata};