5d940b57ef
This commit fixes an issue where the card's header would improperly
expand to full height during card collapse, leading to a less smooth
user experience. Previously, this was caused by the indiscriminate use
of `transition: all` in the `.card__expander`, which included unwanted
properties in the transition during collapse, such as height. This is
solved by using Vue transitions to apply transition only during
expansion.
Changes:
- Introduce a new Vue component, `CardExpandAnimation`:
- Centralizes the animation process, applying the same animation to
both the card and its arrow for consistency.
- Resolves the glitch by adjusting classes exclusively during the
enter animation phase, avoiding unintended side effects during leave
animation phase.
- Adopts a Vue-idiomatic approach for transition management, improving
code readability and maintainability.
- Improves separation of concerns by isolating animation logic from
the component's core functionality, facilitating easier updates or
replacements.
- Remove unnecessary transitions to enhance code simplicity and
performance:
- Remove `transition: all` on `.card__expander`, which was identified
as the cause of the issue.
- Remove unnecessary `transition: all` on `.card`.
- Adjust transitions to specifically target and affect the transform
property (instead of `all`) to optimize animation behavior and
eliminate potential side-effects.
These changes not only fix the issue at hand but also contribute to a
more maintainable and performant codebase by clarifying animation logic
and reducing unnecessary CSS transitions.
17 lines
325 B
Vue
17 lines
325 B
Vue
<template>
|
|
<li class="step">
|
|
<slot />
|
|
</li>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
// Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|