es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Framer Motion: Mantén la misma duración al finalizar el desplazamiento del cursor.

12 Jul, 2023 Programación

Tengo una animación que escala el div al pasar el mouse por encima con una duración de 2, lo cual funciona correctamente. Quiero que se siga la misma duración cuando el mouse abandona el div. Actualmente, el div se reduce instantáneamente a su tamaño original.

import "./styles.css";
import { motion } from "framer-motion";

const variants = {
  hover: { scale: 2, transition: { duration: 2 } }
};
export default function App() {
  return (
    <div classname="App">
      <motion.div variants="{variants}" whilehover="hover" classname="card"></motion.div>
    </div>
  );
}

Existe una propiedad onHoverEnd, pero es una función en lugar de una animación. ¿Debo iniciar manualmente otra animación en esa función?

Enlace de Codesandbox: Enlace a Codesandbox

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes comenzar otra animación en la función onHoverEnd para lograr el efecto deseado de que el div vuelva a su tamaño original con una duración de 2. Puedes crear otra variante para el componente motion.div con una escala de 1 y una duración de 2 y especificarla en el objeto variants. Luego, puedes usar la propiedad onHoverEnd para establecer el componente de nuevo a su tamaño original usando esta nueva variante.

    Aquí tienes un ejemplo de código actualizado:

    import "./styles.css";
import { motion } from "framer-motion";

const variants = {
  hover: { scale: 2, transition: { duration: 2 } },
  original: { scale: 1, transition: { duration: 2 } }
};

export default function App() {
  return (
    <div classname="App">
      <motion.div variants="{variants}" whilehover="hover" animate="original" onhoverend="{()" ==""> variants.original}
        className="card"
      ></motion.div>
    </div>
  );
}

    En este ejemplo, hemos agregado una nueva variante original a nuestro objeto variants con una escala de 1 y una duración de 2. También hemos agregado una propiedad animate al componente motion.div para establecerlo en la variante original cuando no está siendo sobrevolado. Finalmente, hemos agregado una propiedad onHoverEnd que establece el componente a la variante original cuando la animación de sobre vuelo termina.

Comments are closed.