0
66
ViewsComportamiento de selección suave en React
A continuación se muestra el enlace de la caja de arena:
https://codesandbox.io/s/tabs-component-bkjr1?file=/src/App.js
Quiero tener un comportamiento suave en segundo plano cuando el usuario selecciona cualquiera de las opciones de la pestaña. El fondo cambia abruptamente a partir de ahora. Quiero tener un comportamiento similar al de las pestañas en material-ui a medida que el indicador se mueve de una opción seleccionada a la otra.
Edit-1: quiero implementar el comportamiento de la diapositiva en el fondo.
Editar-2: 
1 answers
Answer question0
Aquí está, en Vue 3, que es bastante similar a React. Debería darte una idea de lo que tienes que hacer. Si algo no está claro, por favor pregunte.
const { createApp, reactive, onMounted, watch, toRefs } = Vue; createApp({ setup() { const state = reactive({ items: ['All Posts', 'Public', 'Private'], activeIndex: 0, menuRef: null, menuItemRefs: [], floaterStyle: {} }); const updateFloater = () => { const e = state.menuItemRefs[state.activeIndex]?.getBoundingClientRect(); const m = state.menuRef?.getBoundingClientRect(); if (e && m) { state.floaterStyle = { inset: `${ e.top - m.top}px ${ m.right - e.right}px ${ m.bottom - e.bottom}px ${ e.left - m.left}px` } } }; onMounted(updateFloater); watch(() => state.activeIndex, updateFloater); return toRefs(state); } }).mount('#app') .menu { 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: inset .3s cubic-bezier(.4,0,.2,1); 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 === activeIndex}" :ref="el => el ? menuItemRefs.push(el): void 0" @click="activeIndex = key"></div> </div> </div> Actualización: Lo mismo , en React.
Le recomiendo encarecidamente que haga la "traducción" a React usted mismo. Aprenderá más y terminará entendiendo lo que sucede en DOM, debajo del capó.