Theme Toggle Transitions
Toggles and inputs @bhaskar Stars:0 Views:0
<div class="th"><div class="pv" data-t="dark"><div class="cn"><b>Aa</b><span>Dark theme</span></div></div><div class="row"><div><button data-m="rect" aria-label="Rectangle"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></button><span>Rectangle</span></div><div><button data-m="circle" aria-label="Circle"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></button><span>Circle</span></div><div><button data-m="blur" aria-label="Circle blur"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></button><span>Circle blur</span></div><div><button data-m="blinds" aria-label="Blinds"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></button><span>Blinds</span></div></div></div>
<style>
.th{display:grid;gap:22px;justify-items:center;font-family:system-ui,-apple-system,sans-serif}.pv{position:relative;width:300px;height:130px;border-radius:18px;overflow:hidden;border:1px solid #2a2a2a;background:#0f0f0f;color:#f1f1f1}.pv[data-t=light]{background:#f6f6f3;color:#161616;border-color:#ddd}.cn,.ov .cn{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px}.cn b{font-size:40px;line-height:1}.cn span{font-size:12px;opacity:.6}.ov{position:absolute;inset:0;pointer-events:none}.ov.light{background:#f6f6f3;color:#161616}.ov.dark{background:#0f0f0f;color:#f1f1f1}.ov i{position:absolute;left:0;right:0;transform:scaleY(0);transition:transform .45s cubic-bezier(.3,.9,.3,1)}.ov i.d{transform:scaleY(1)}.row{display:flex;gap:16px}.row div{display:grid;justify-items:center;gap:8px}.row span{font-size:11px;color:#8a8a8a}.row button{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid #2a2a2a;background:#161616;color:#fff;cursor:pointer;transition:background .2s,transform .2s}.row button:hover{background:#222}.row button:active{transform:scale(.92)}.row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.3,1.3,.4,1)}.pv[data-t=light]~.row svg{transform:rotate(180deg)}
</style>
<script>
(function(){var pv=document.querySelector('.pv'),busy=false,SUN='<circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>',MOON='<path d="M20 14.5A8 8 0 019.5 4a8 8 0 1010.5 10.5z"/>';function icons(t){document.querySelectorAll('.row svg').forEach(function(s){s.innerHTML=t==='dark'?SUN:MOON})}function go(m){if(busy)return;busy=true;var cur=pv.dataset.t,nx=cur==='dark'?'light':'dark',ov=document.createElement('div');ov.className='ov '+nx;ov.innerHTML='<div class="cn"><b>Aa</b><span>'+(nx==='dark'?'Dark':'Light')+' theme</span></div>';pv.appendChild(ov);var a;if(m==='rect'){a=ov.animate([{clipPath:'inset(0 100% 0 0)'},{clipPath:'inset(0 0 0 0)'}],{duration:650,easing:'cubic-bezier(.6,0,.2,1)',fill:'forwards'})}else if(m==='circle'){a=ov.animate([{clipPath:'circle(0% at 50% 100%)'},{clipPath:'circle(150% at 50% 100%)'}],{duration:750,easing:'cubic-bezier(.5,0,.2,1)',fill:'forwards'})}else if(m==='blur'){ov.style.webkitMaskImage=ov.style.maskImage='radial-gradient(circle at 50% 100%,#000 55%,transparent 72%)';ov.style.webkitMaskRepeat=ov.style.maskRepeat='no-repeat';ov.style.webkitMaskPosition=ov.style.maskPosition='50% 100%';a=ov.animate([{webkitMaskSize:'0% 0%',maskSize:'0% 0%'},{webkitMaskSize:'320% 320%',maskSize:'320% 320%'}],{duration:900,easing:'ease-in-out',fill:'forwards'})}else{var bg=nx==='dark'?'#0f0f0f':'#f6f6f3',h=130/6;ov.className='ov '+nx;ov.style.background='none';ov.innerHTML='';for(var i=0;i<6;i++){var s=document.createElement('i');s.style.cssText='top:'+(i*h)+'px;height:'+(h+1)+'px;background:'+bg+';transition-delay:'+(i*70)+'ms';ov.appendChild(s)}var c=document.createElement('div');c.className='cn';c.style.color=nx==='dark'?'#f1f1f1':'#161616';c.style.opacity=0;c.style.transition='opacity .3s .5s';c.innerHTML='<b>Aa</b><span>'+(nx==='dark'?'Dark':'Light')+' theme</span>';ov.appendChild(c);requestAnimationFrame(function(){requestAnimationFrame(function(){[].slice.call(ov.querySelectorAll('i')).forEach(function(s){s.classList.add('d')});c.style.opacity=1})});a={finished:new Promise(function(r){setTimeout(r,1100)})}}a.finished.then(function(){pv.dataset.t=nx;pv.querySelector('.cn').innerHTML='<b>Aa</b><span>'+(nx==='dark'?'Dark':'Light')+' theme</span>';icons(nx);ov.remove();busy=false})}document.querySelectorAll('.row button').forEach(function(b){b.onclick=function(){go(b.dataset.m)}})})();
</script>