Skip to content

Commit

Permalink
refactor(staggered-fade-and-slide): use Vue native staggered transition
Browse files Browse the repository at this point in the history
  • Loading branch information
victorcg88 committed Jun 24, 2024
1 parent 9ff88d5 commit e98a862
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
export { default as TestCollapseWidth } from './test-collapse-width.vue';
export { default as TestCrossFade } from './test-cross-fade.vue';
export { default as TestFade } from './test-fade.vue';
export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<template>
<h1>Dinamic content:</h1>
<button @click="insert">Insert at random index</button>
<button @click="reset">Reset</button>

<StaggeredFadeAndSlide tag="ul" :stagger="500">
<li v-for="item in items" :key="item.id">
{{ item.id }} - {{ item.name }}
<button @click="remove(item)">x</button>
</li>
</StaggeredFadeAndSlide>

<br />
<h1>Animation as prop</h1>
<BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
<template #default="{ suggestion }">
<span>{{ suggestion.query }}</span>
</template>
</BaseSuggestions>

<br />
<h1>Static content:</h1>
<StaggeredFadeAndSlide tag="ul" :stagger="50">
<li key="1">Element to animate</li>
<li key="2">Element to animate</li>
<li key="3">Element to animate</li>
</StaggeredFadeAndSlide>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
import {
getQuerySuggestionsStub,
createResultStub,
getResultsStub
} from '../../../../x-components/src/__stubs__';
const suggestions = getQuerySuggestionsStub('chip', 5);
const getInitialItems = () => getResultsStub(5);
const items = ref(getInitialItems());
let id = items.value.length + 1;
/**
* Insert a new item at a random index.
*/
function insert() {
const i = Math.round(Math.random() * items.value.length);
items.value.splice(i, 0, createResultStub(`Product ${id++}`));
}
/**
* Reset the list of items.
*/
function reset() {
items.value = getInitialItems();
id = items.value.length + 1;
}
/**
* Remove an item from the list.
*
* @param item - The item to remove.
*/
function remove(item: any) {
const i = items.value.indexOf(item);
if (i > -1) {
items.value.splice(i, 1);
}
}
</script>
2 changes: 2 additions & 0 deletions packages/_vue3-migration-test/src/components/test-search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<BaseVariableColumnGrid
style="--x-size-min-width-grid-item: 150px"
class="x-gap-12"
:animation="StaggeredFadeAndSlide"
:columns="4"
>
<template #result="{ item: result }">
Expand Down Expand Up @@ -52,6 +53,7 @@
import SearchButton from '../../../x-components/src/x-modules/search-box/components/search-button.vue';
import CrossFade from '../../../x-components/src/components/animations/cross-fade.vue';
import { use$x } from '../../../x-components/src/composables/use-$x';
import StaggeredFadeAndSlide from '../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
// TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin
const _$x = use$x();
</script>
Expand Down
6 changes: 6 additions & 0 deletions packages/_vue3-migration-test/src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
TestNextQueries,
TestIdentifierResults,
TestExtraParams,
TestStaggeredFadeAndSlide,
TestSearch
} from './';

Expand Down Expand Up @@ -75,6 +76,11 @@ const routes = [
name: 'Fade',
component: TestFade
},
{
path: '/fadeandslide',
name: 'StaggeredFadeAndSlide',
component: TestStaggeredFadeAndSlide
},
{
path: '/base-modal',
name: 'BaseModal',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,74 +1,147 @@
<template>
<staggering-transition-group
v-on="$listeners"
class="x-staggered-fade-and-slide"
:name="name"
<!-- eslint-disable vue/attributes-order -->
<TransitionGroup
v-bind="$attrs"
v-on="$listeners"
@enter="enter"
@after-enter="afterEnter"
:appear="appear"
:name="name"
:tag="tag"
>
<!-- @slot (Required) Transition-group content -->
<slot />
</staggering-transition-group>
</TransitionGroup>
</template>

<script lang="ts">
import { mixins } from 'vue-class-component';
import { Component, Prop } from 'vue-property-decorator';
import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';
import DisableAnimationMixin from './disable-animation.mixin';
import { defineComponent, ref } from 'vue';
// import { useDisableAnimation } from './use-disable-animation';
/**
* Renders a transition group wrapping the elements passed in the default slot and animating
* them with an staggered fade and slide animation.
*
* @public
*/
@Component({
components: { StaggeringTransitionGroup },
inheritAttrs: false
})
export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {
/**
* Indicates if the transition must be applied on the initial render of the node.
*/
@Prop({
type: Boolean,
default: true
})
public appear!: boolean;
/**
* The name of the animation.
*
* @public
*/
protected animationName = 'x-staggered-fade-and-slide-';
}
</script>

<style lang="scss" scoped>
$transition-duration: 0.25s;
.x-staggered-fade-and-slide {
z-index: 0;
export default defineComponent({
name: 'StaggeredFadeAndSlide',
inheritAttrs: false,
props: {
/**
* Indicates if the transition must be applied on the initial render of the node.
*/
appear: {
type: Boolean,
default: true
},
/**
* The tag of the node to render to the DOM.
*/
tag: {
type: String,
default: 'div'
},
/**
* The time in ms to stagger each item.
*/
stagger: {
type: Number,
default: 25
}
},
setup(props) {
/**
* The duration of the transition in ms.
*/
const transitionDuration = 250;
/**
* The counter to keep track of the staggered delay.
*/
const staggerCounter = ref(0);
/**
* The counter to keep track of the animations.
*/
const animationList = ref<HTMLElement[]>([]);
/**
* The name of the animation.
*/
const animationName = ref('x-staggered-fade-and-slide');
/**
* The name of the animation.
*/
const name = animationName.value;
&::v-deep .x-staggered-fade-and-slide {
&--enter-active,
&--leave-active {
transition: $transition-duration ease-out;
transition-property: opacity, transform;
/**
* Calculate the delay for the next element.
*
* @returns The delay in ms.
*/
function getNextTransitionDelay(): number {
return staggerCounter.value++ * props.stagger;
}
&--move {
transition: transform $transition-duration ease-out;
/**
* The enter transition.
*
* @param el
* @param done
*/
function enter(el: HTMLElement, done: () => void) {
animationList.value.push(el);
const delay = getNextTransitionDelay();
el.style.transitionDelay = `${delay}ms`;
setTimeout(() => {
el.style.transitionDelay = '0ms';
done();
}, transitionDuration + delay);
}
&--enter,
&--leave-to {
transform: translate3d(0, 50%, 0);
opacity: 0;
z-index: -1;
/**
* The after enter transition.
*
* @param el
*/
function afterEnter(el: HTMLElement) {
animationList.value = animationList.value.filter(item => item !== el);
if (animationList.value.length === 0) {
staggerCounter.value = 0;
}
}
return {
name,
enter,
afterEnter
};
}
});
</script>

<style lang="scss">
$transition-duration: 0.25s;
/* 1. Declare transitions */
.x-staggered-fade-and-slide-enter-active,
.x-staggered-fade-and-slide-leave-active {
transition: $transition-duration ease-out;
transition-property: opacity, transform;
}
.x-staggered-fade-and-slide-move {
transition: transform $transition-duration ease-out;
}
/* 2. declare enter from and leave to state */
.x-staggered-fade-and-slide-enter,
.x-staggered-fade-and-slide-enter-from,
.x-staggered-fade-and-slide-leave-to {
opacity: 0;
transform: translate3d(0, 50%, 0);
}
/* 3. ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.x-staggered-fade-and-slide-leave-active {
position: absolute;
}
</style>

Expand Down
5 changes: 5 additions & 0 deletions packages/x-components/src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ const routes: RouteConfig[] = [
name: 'Home',
component: () => import('./views/home/Home.vue')
},
{
path: '/animations',
name: 'Animations Test',
component: () => import('./views/home/animations-test.vue')
},
{
path: '/products/:id',
name: 'Product page',
Expand Down
Loading

0 comments on commit e98a862

Please sign in to comment.