Master Vue.js Animations: From CSS Transitions to Advanced Effects

This guide walks you through creating dynamic page effects in Vue using CSS transitions, CSS animations, Vue's built‑in transition components, and third‑party libraries like animate.css, while sharing best practices, code snippets, and performance tips for clean, maintainable front‑end development.

CSS TransitionVue.jsWeb Development

0 likes · 13 min read

Master Vue.js Animations: From CSS Transitions to Advanced Effects

Rare Earth Juejin Tech Community

May 24, 2024 · Frontend Development

Implementing a Smooth Collapsible Panel (Accordion) in Vue Without Third‑Party UI Libraries

This article demonstrates how to build a responsive, animated collapsible side‑menu panel in Vue by using plain HTML, CSS transitions, Vue's transition component, dynamic class bindings, and a few lines of JavaScript to control height, offering a lightweight alternative to third‑party UI libraries.

AccordionCSS TransitionUI Component

0 likes · 8 min read

Implementing a Smooth Collapsible Panel (Accordion) in Vue Without Third‑Party UI Libraries

HelloTech

Oct 9, 2023 · Frontend Development

Vue Expand/Collapse Animation for FAQ Section

The article shows how to create a smooth FAQ expand‑collapse effect in Vue by storing each item’s visibility in a show flag, wrapping the answer in a transition component, and using JavaScript hooks to set explicit heights and overflow while rotating the arrow icon for visual feedback.

CSS TransitionExpand CollapseFAQ

0 likes · 10 min read