Add UI animations for expand/collapse actions
This commit improves the user experience by adding smooth transitions for expanding and collapsing tree node items and documentation sections. The introduction of these animations makes the interface feel more dynamic and responsive to user interactions. Key changes: - Implement a new `ExpandCollapseTransition` component to wrap UI elements requiring expand/collapse animations. - Utiliz the `ExpandCollapseTransition` in tree view nodes and documentation sections to animate visibility changes. - Refactor CSS to remove obsolete transition mixins, leveraging Vue's transition system for consistency and maintainability.
This commit is contained in:
@@ -10,28 +10,31 @@
|
||||
@hide="isExpanded = false"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="docs && docs.length > 0 && isExpanded"
|
||||
class="docs"
|
||||
:class="{
|
||||
'docs-expanded': isExpanded,
|
||||
'docs-collapsed': !isExpanded,
|
||||
}"
|
||||
>
|
||||
<DocumentationText
|
||||
:docs="docs"
|
||||
class="text"
|
||||
<ExpandCollapseTransition>
|
||||
<div
|
||||
v-if="docs && docs.length > 0 && isExpanded"
|
||||
class="docs"
|
||||
:class="{
|
||||
expanded: isExpanded,
|
||||
collapsed: !isExpanded,
|
||||
'docs-expanded': isExpanded,
|
||||
'docs-collapsed': !isExpanded,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<DocumentationText
|
||||
:docs="docs"
|
||||
class="text"
|
||||
:class="{
|
||||
expanded: isExpanded,
|
||||
collapsed: !isExpanded,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</ExpandCollapseTransition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, PropType } from 'vue';
|
||||
import ExpandCollapseTransition from '@/presentation/components/Shared/ExpandCollapse/ExpandCollapseTransition.vue';
|
||||
import DocumentationText from './DocumentationText.vue';
|
||||
import ToggleDocumentationButton from './ToggleDocumentationButton.vue';
|
||||
|
||||
@@ -39,6 +42,7 @@ export default defineComponent({
|
||||
components: {
|
||||
DocumentationText,
|
||||
ToggleDocumentationButton,
|
||||
ExpandCollapseTransition,
|
||||
},
|
||||
props: {
|
||||
docs: {
|
||||
|
||||
Reference in New Issue
Block a user