Skip to content

Commit

Permalink
chore: 🤖 update animatelayout and animatepresencestack
Browse files Browse the repository at this point in the history
change types and update style

BREAKING CHANGE: 🧨 none

✅ Closes: none
  • Loading branch information
JonathonRP authored Oct 18, 2024
1 parent 227d01f commit 3f0c2a0
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 22 deletions.
36 changes: 19 additions & 17 deletions src/lib/components/motion/AnimateLayout.svelte
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
<script>
import { motion } from "$lib/motion-start";
const spring = {
type: "spring",
stiffness: 700,
damping: 30,
};
let active = false;
function toggleSwitch() {
active = !active;
}
let isOn = false;
const toggleSwitch = () => (isOn = !isOn);
</script>

<button class="switch" data-active={active} onclick={toggleSwitch}>
<motion.div layout class="handle" transition={spring} />
</button>

<p>This should animate on click</p>
<div
class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
>
<button class="switch" class:isOn onclick={toggleSwitch}>
<motion.div layout class="handle" />
</button>
</div>

<style>
.switch {
Expand All @@ -33,10 +26,19 @@
cursor: pointer;
}
.switch[data-active="true"] {
.switch {
display: flex;
justify-content: flex-start;
}
.isOn {
justify-content: flex-end;
}
/* .switch[data-active="true"] {
justify-content: flex-end;
} */
:global(.handle) {
width: 3rem;
height: 3rem;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/motion/AnimatePresenceStack.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
$: mint = index + 1;
</script>

<Motion.div
<div
class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
>
<AnimatePresence initial={false} let:item list={[{ key: index }]}>
<Card bind:index={mint} frontCard={false} />
<Card bind:index drag="x" frontCard={true} />
</AnimatePresence>
</Motion.div>
</div>
3 changes: 1 addition & 2 deletions src/lib/motion-start/render/utils/lifecycles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,7 @@ function createLifecycles(...args: any[]) {
managers.forEach((manager, i) => {
lifecycles['on' + names[i]] = (handler: (...args: any) => void) => manager.add(handler);
lifecycles['notify' + names[i]] = () => {
// @ts-expect-error
return manager.notify.apply(manager, ...args);
return manager.notify.apply(manager, args);
};
});
return lifecycles satisfies LifecycleManager;
Expand Down
4 changes: 3 additions & 1 deletion src/routes/tests/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,9 @@
<Card.Root>
<Card.Header>
<Card.Title>Animate Layout</Card.Title>
<Card.Description>Click switch button</Card.Description>
<Card.Description>
Click the switch to visualize the effect
</Card.Description>
</Card.Header>
<Card.Content>
<AnimateLayout />
Expand Down

0 comments on commit 3f0c2a0

Please sign in to comment.