Skip to content

Commit

Permalink
feat: reactive staggerConfig, simplify accordion example
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattrothenberg
Matt Rothenberg authored and mattrothenberg committed Nov 9, 2019
1 parent bfc60cf commit c4eded4
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 198 deletions.
5 changes: 5 additions & 0 deletions src/Flipper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,11 @@ export default {
this.flipInstance.update(oldKey, newKey);
});
}
},
staggerConfig(oldConfig, newConfig) {
if (newConfig !== oldConfig) {
this.flipInstance.staggerConfig = newConfig;
}
}
}
};
Expand Down
218 changes: 20 additions & 198 deletions stories/Accordion.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,16 @@
<template>
<div class="staggered-list-content">
<Flipper :flipKey="focused" :staggerConfig="staggerConfig" spring="gentle">
<ul class="list">
<li @click="toggleItem(index)" v-for="(num,index) in list" :key="index">
<Flipped
v-if="index !== focused"
:flipId="`listItem-${index}`"
stagger="card"
:shouldInvert="shouldFlip(index)"
>
<div class="listItem">
<Flipped :inverseFlipId="`listItem-${index}`">
<div class="listItemContent">
<Flipped
:flipId="`avatar-${index}`"
:shouldFlip="shouldFlip(index)"
stagger="card-content"
>
<div class="avatar"></div>
</Flipped>
<div class="description">
<Flipped
v-for="thing in num.description"
:key="thing"
:shouldFlip="shouldFlip(index)"
stagger="card-content"
:flipId="`description-${index}-${thing}`"
>
<div></div>
</Flipped>
</div>
</div>
</Flipped>
</div>
</Flipped>
<Flipped
@on-start="handleStart"
@on-complete="handleComplete"
v-else
:flipId="`listItem-${index}`"
stagger="card"
>
<div class="expandedListItem">
<Flipped :inverseFlipId="`listItem-${index}`">
<div class="expandedListItemContent">
<Flipped :flipId="`avatar-${index}`" stagger="card-content">
<div class="avatar avatarExpanded"></div>
</Flipped>
<div class="description">
<Flipped
v-for="thing in num.description"
stagger="card-content"
:key="thing"
:flipId="`description-${index}-${thing}`"
>
<div></div>
</Flipped>
</div>
<div class="additional-content">
<div></div>
<div></div>
<div></div>
</div>
</div>
</Flipped>
</div>
</Flipped>
</li>
</ul>
</Flipper>
</div>
<Flipper :flipKey="focused" spring="gentle" :staggerConfig="staggerConfig">
<div class="m-4">
<div v-for="(num, index) in list" :key="index">
<Flipped :flipId="`card-${index}`" v-if="index !== focused" stagger="card">
<div @click="toggleItem(index)" role="button" class="bg-grey h-8 my-4"></div>
</Flipped>
<Flipped :flipId="`card-${index}`" v-else stagger="card">
<div @click="toggleItem(index)" role="button" class="bg-grey h-32 my-4"></div>
</Flipped>
</div>
</div>
</Flipper>
</template>

<script>
Expand All @@ -85,20 +26,12 @@ export default {
data() {
return {
focused: null,
list: [
{
list: Array(6)
.fill()
.map(() => ({
open: false,
description: ["a", "b", "c"]
},
{
open: false,
description: ["a", "b", "c"]
},
{
open: false,
description: ["a", "b", "c"]
}
]
}))
};
},
methods: {
Expand All @@ -107,9 +40,7 @@ export default {
el.classList.add("animated-in");
}, 600);
},
handleComplete({ el, id }) {
console.log("Finished", el, id);
},
handleComplete({ el, id }) {},
shouldFlip(index) {
return (prev, current) => {
return index === prev || index === current;
Expand All @@ -128,8 +59,9 @@ export default {
staggerConfig() {
return {
card: {
reverse: this.focused !== null ? true : false,
speed: 0.5
reverse: this.focused === null,
// reverse: true,
speed: 0.1
}
};
},
Expand All @@ -140,113 +72,3 @@ export default {
};
</script>

<style scoped>
.staggered-list-content {
width: 400px;
margin: 2rem auto;
}
.list {
list-style-type: none;
display: flex;
flex-direction: column;
height: 100vh;
padding: 0;
}
.list li {
width: 100%;
}
.list li + li {
margin-top: 1rem;
}
.listItem {
width: 100%;
cursor: pointer;
background-color: #ffd379;
overflow: hidden;
}
.listItemContent {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
}
.avatar {
width: 4rem;
height: 4rem;
border-radius: 100px;
background-color: #282c34;
margin-right: 2rem;
}
.avatarExpanded {
width: 8rem;
height: 8rem;
margin-right: 0;
margin-bottom: 1rem;
}
.description > div {
background-color: #282c34;
width: 14rem;
border-radius: 6px;
height: 0.5rem;
}
.description > div:nth-of-type(2) {
width: 11rem;
}
.description > div:nth-of-type(3) {
width: 8rem;
}
.description > div + div {
margin-top: 1rem;
}
.expandedListItem .description {
display: flex;
align-items: center;
flex-direction: column;
}
.expandedListItem {
cursor: pointer;
background-color: #ffd379;
}
.expandedListItemContent {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.additional-content {
width: 100%;
margin-top: 2rem;
}
.additional-content > div {
opacity: 0;
border-radius: 3px;
background-color: #282c34;
height: 5rem;
}
/* content fade in animations */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
}
}
.animated-in .additional-content > div {
animation: fadeIn 0.4s forwards;
}
.additional-content > div:nth-of-type(2) {
animation-delay: 0.15s;
}
.additional-content > div:nth-of-type(3) {
animation-delay: 0.3s;
}
.additional-content > div + div {
margin-top: 1rem;
}
</style>

0 comments on commit c4eded4

Please sign in to comment.