React 中的平滑選擇行為

Question

以下是沙盒鏈接 -

https://codesandbox.io/s/tabs-component-bkjr1?file=/src/App.js

當用戶從選項卡中選擇任何選項時，我希望在后台有一個流暢的行為。 到目前為止，背景突然發生了變化。 我希望與 material-ui 中的選項卡具有類似的行為，因為指示器從一個選定的選項移動到另一個。

Edit-1：我想在背景上實現滑動行為。

編輯2：

Answer 1

這是在 Vue 3 中完成的，它與 React 非常相似。 應該讓你知道你需要做什么。 如果有什么不清楚的，請詢問。

 const { createApp, reactive, onMounted, watch, toRefs } = Vue; createApp({ setup() { const state = reactive({ items: ['All Posts', 'Public', 'Private'], currentIndex: 0, menuRef: null, menuItemRefs: [], floaterStyle: {} }); const updateFloater = () => { const e = state.menuItemRefs[state.currentIndex]?.getBoundingClientRect(); const m = state.menuRef?.getBoundingClientRect(); if (e && m) { state.floaterStyle = { top: `${e.top - m.top}px`, left: `${e.left - m.left}px`, bottom: `${m.bottom - e.bottom}px`, right: `${m.right - e.right}px` } } }; onMounted(updateFloater); watch(() => state.currentIndex, updateFloater); return toRefs(state); } }).mount('#app')

 .menu { --t: .3s cubic-bezier(.4,0,.2,1); padding: 1rem; display: flex; position: relative; }.menu div:not(.floater) { padding: 1rem; cursor: pointer; transition: color.1s linear; }.menu.floater { background-color: red; position: absolute; z-index: -1; transition: top var(--t), bottom var(--t), left var(--t), right var(--t); border-radius: 25px; }.menu.active { color: white; }

 <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script> <div id="app"> <div class="menu" ref="menuRef"> <div class="floater":style="floaterStyle"></div> <div v-for="(item, key) in items" v-text="item":class="{active: key === currentIndex}":ref="el => el? menuItemRefs.push(el): void 0" @click="currentIndex = key"></div> </div> </div>