Tag

transition

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 24, 2025 · Frontend Development

How to Smoothly Change Border Width on Hover Without Layout Shift

This article explains why increasing a card's border width on hover can cause layout jitter and presents three CSS techniques—transparent initial border, dynamic padding adjustment, and flex‑centered layout—to achieve a smooth transition without shifting inner content.

CSSborderflex layout
0 likes · 6 min read
How to Smoothly Change Border Width on Hover Without Layout Shift
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 10, 2025 · Frontend Development

Implementing a Seamless Carousel with Vue: Dynamic Data Switching, Transition Effects, and Auto‑Play Controls

This tutorial explains how to build a seamless carousel in Vue by dynamically switching a data list, using the Transition component for enter/leave animations, adding an auto‑play timer, handling hover pause/resume, and solving visibility‑change flicker with concise CSS and JavaScript code.

CSSCarouselJavaScript
0 likes · 9 min read
Implementing a Seamless Carousel with Vue: Dynamic Data Switching, Transition Effects, and Auto‑Play Controls
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 1, 2024 · Frontend Development

Implementing Page Transition Animations in Vue Router (Mimicking Douyin App)

This article explains how to use Vue Router and the Transition component to create forward and backward page‑slide animations that mimic the Douyin app, covering router initialization, route definitions, nested routes, CSS animation rules, and the logic for detecting navigation direction.

JavaScriptRouterVue
0 likes · 14 min read
Implementing Page Transition Animations in Vue Router (Mimicking Douyin App)
php中文网 Courses
php中文网 Courses
Aug 23, 2021 · Frontend Development

Vue.js v-for key order affects transition animation and how to fix it

This article explains why using a numeric index as the key in a Vue.js v‑for loop can cause transition animations to apply only to the last element, and shows how switching the key to a unique string restores smooth, sequential animations.

Vue.jsanimationfrontend
0 likes · 4 min read
Vue.js v-for key order affects transition animation and how to fix it