Tag

transition

1 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.

CSSFlex LayoutFrontend
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.

CSSCarouselFrontend
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.

FrontendJavaScriptRouter
0 likes · 14 min read
Implementing Page Transition Animations in Vue Router (Mimicking Douyin App)
WecTeam
WecTeam
May 13, 2022 · Frontend Development

Top Frontend Picks: Prefetch‑Powered H5 Offline Packages, 2022 React Ecosystem, and React 18 Transition Deep Dive

This week’s WecTeam Frontend Weekly highlights a prefetch‑driven H5 offline‑package strategy for the Jingxi app, a comprehensive review of the 2022 React ecosystem, and an in‑depth look at React 18’s Transition API, offering practical insights to boost web performance and developer productivity.

FrontendPerformance OptimizationReact
0 likes · 3 min read
Top Frontend Picks: Prefetch‑Powered H5 Offline Packages, 2022 React Ecosystem, and React 18 Transition Deep Dive
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.

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