Adición de animaciones
Olvidaste 'changeProp: 1' en el rasgo de animación
Lee la respuesta completa abajo ↓Pregunta
Hola @artf quiero incluir animación en todos los bloques Aquí tienes un fragmento de código, pero no funciona. ¿Podrías ayudarme, por favor?
const def = editor. Components.getType("default");
editor. Components.addType("default", {
modelo:{
valores predeterminados:{
Rasgos:[
... def.model.prototype.defaults.traits,
... [{
tipo: "select",
etiqueta: "Animación",
Nombre: 'Animation',
Opciones:[
{valor: 'bounce', nombre: 'Bounce'},
Otras animaciones...
]
}, {
cambioProp: 1,
Tipo: "número",
etiqueta: "Duración(s)",
Nombre: "Duración",
}, {
cambioProp: 1,
Tipo: "número",
etiqueta: "Delay(s)",
Nombre: "Delay",
}]
]
},
init() {
this.on('change:animation', this.onAnimationChange);
this.onAnimationChange();
this.on("change:duration", this.onDurationChange);
this.onDurationChange();
this.on("change:delay", this.onDelayChange);
this.onDelayChange();
},
onAnimationChange() {
animación const = this.get('animation')
this.addAttributes({ 'data-anim-type': animation });
this.addClass({ animation });
},
onDurationChange() {
duración const = esto.get("duración");
this.addStyle({ "animation-duration": duration });
},
onDelayChange() {
retardo const = this.get("delay");
this.addStyle({ "animation-delay": delay });
},
}
});
Gracias
Respuestas (3)
Olvidaste 'changeProp: 1' en el rasgo de animación
@artf Sin dar el nombre de la animación, no funciona. ¿Debería necesitar añadir la regla CSS para esto? ¿Alguna sugerencia? ¿Por favor?
Gracias por informar de esto, @Abhisheknanda1344463.
Gracias por compartir tu informe sobre Añadir animaciones. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3446
No se pueden almacenar datos Token inesperado '-'
Por favor, ayudadme, quiero almacenar datos de GJS en mysql pero no consigo obtener ningún dato de frontend a back end Aquí es mi código: '...
Issue #3225
¿Cómo actualizar el estilo a partir de un rasgo de casilla?
Hola @artf Estoy intentando actualizar el estilo usando el rasgo de casilla, pero no llama a la función. Aquí está el código ¡Agradezco muc...
Issue #3119
[PREGUNTA] ¿Cómo crear un bloque personalizado hecho con componentes de grapesjs?
Hola, quiero que me hagan bloques personalizados con componentes de grapesjs. Encontré la solución para añadir componentes: https://github....
Issue #3512
Los elementos hijos no se pueden arrastrar, se pueden soltar y se pueden resaltar. también el CSS de todos los elementos hijos que no se insertan en la sección de estilo mientras se desarrolla un componente banner en un plugin
Hola @artf, Estoy intentando desarrollar un plugin sencillo para banners que incluya un encabezado, un subtítulo y un enlace. y cada elemen...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.