La barra de navegación de etiquetas CSS pura del mini programa subraya la siguiente animación

Muchas veces, cuando navegamos por pestañas, haremos clic en una animación de transición; de lo contrario, se verá rígida y el usuario no obtendrá una mejor experiencia de usuario. Como se muestra en la siguiente figura:

Vista previa del efecto en herramientas de desarrollador

Podemos usar dos formas para lograr esta animación, transición css3 o usar js para controlar. Podemos usar dos métodos para lograr este efecto de animación, transición css3 o usar control js. Lo más sencillo es, por supuesto, usar css3 para escribir. Primero echemos un vistazo a la implementación específica de css3.

Implementación de CSS3:

Primero mire el diseño .wxml más básico:

Como puede ver en la imagen, la fila paginada actual se compone de un elemento dedicado constituido. Entonces, ¿cómo hago para que la línea siga la etiqueta? Es la parte del círculo rojo, que se mueve mediante el desplazamiento de TranslateX, y el efecto de transición se logra mediante la transición.

curtab es el índice de la pestaña en la que se hace clic actualmente. Al hacer clic en el índice de la pestaña * 250 (el ancho de una pestaña), la línea seguirá el desplazamiento correspondiente.

Eche un vistazo a la sección .js:

Esta es una forma sencilla de implementar la animación de seguimiento de etiquetas.

(Un inconveniente del método anterior es que el ancho de la pestaña es fijo, pero en aplicaciones reales, a menudo se encuentran situaciones en las que el ancho no es fijo).

Implementación de js :

Algunos estudiantes a los que les gusta jugar preguntan si deberían usar js para implementarlo. Por supuesto, puedes usar js para lograr la misma idea, usando el valor TranslateX del elemento de línea de control. Entonces, ¿cómo sabes cuánto debería ser el desplazamiento? Simplemente obtenga el valor de desplazamiento dinámicamente y asígnelo a traducirX.

Hablando de obtener dinámicamente el valor izquierdo de un elemento, puede usar la API wx.createSelectorQuery del subprograma para devolver los cuatro valores de desplazamiento del elemento después de pasar el elemento. (No presentaré el uso de la API en detalle aquí. Si no lo tiene claro, consulte la documentación usted mismo. Jajaja)

¿Es eso posible?

Veamos el Implementación específica:

p>

emmm Finalmente, vi una operación muy interesante en el front-end. También usa CSS puro para implementar este tipo de animación. Echemos un vistazo a las representaciones.

.css