Estoy usando el complemento a continuación en mi aplicación de demostración https://splidejs.com/options/
estoy confundido en este style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s; ¿cómo funciona la transición?
lo que sé: si el elemento cambia, su opacidad tardará 10 segundos , pero mi aplicación tarda 5 segundos
Revisé mi aplicación de demostración con cronómetro. Cuando hago clic en el botón next , tardó 5sec en mostrar el nuevo elemento.
aquí está mi código de aplicación de demostración
https://codesandbox.io/s/compassionate-drake-y4em6?file=/src/index.js:105-110
new Splide("#splide", { type: "fade", speed: 10000 }).mount();Mencioné la velocidad 10 seg. Significa que tarda 10 segundos en mostrar el nuevo elemento según el documento mencionado. ¿Por qué tarda 5 segundos?
enlace del documento
https://splidejs.com/options/ ¿alguna sugerencia?
La función cubic-bezier es una forma de definir una curva Cubic Bezier .
Una curva Cubic Bezier está definida por cuatro puntos P0, P1, P2 y P3. P0 y P3 son el inicio y el final de la curva y, en CSS, estos puntos son fijos ya que las coordenadas son proporciones. P0 es (0, 0) y representa el tiempo inicial y el estado inicial, P3 es (1, 1) y representa el tiempo final y el estado final.
El problema es que cubic-bezier(0.42, 0.65, 0.27, 0.99) está demasiado curvado hacia arriba, lo que significa que hace la mayor parte de la animación al principio. Por ejemplo si usamos cubic-bezier(.5,.5,.5,.5) sería completamente lineal. Como puede ver en este enlace , la mayor parte de la animación se realiza en los primeros 5 segundos.
Vaya al enlace, la función debe configurarse en cubic-bezier(0.42, 0.65, 0.27, 0.99) de forma predeterminada, pero debe configurar el tiempo en 10 segundos y también seleccionar la curva lineal en el lado derecho para compararlo con El principal.