Animate transitions blazelayout / flowrouter

help
1

Using Blazelayout, we can dynamically change the content of our page. But the result seems static.

I will for example have :

<template name="home">
	<h2>Home</h2>
	{{> home_description}}
	
	{{> Template.dynamic template=ticket_creation}}
	
	{{> ticket_list}}
	
</template>

FlowRouter.route('/', {
	action() {
		BlazeLayout.render('layout', { main: 'home', ticket_creation: 'ticket_proposition'})
	}
})

FlowRouter.route('/create/ticket', {
	action() {
		BlazeLayout.render('layout', { main: 'home', ticket_creation: 'ticket_create_form'}),
	}
})

As there is only one component of the page that changes between the two routes, I would like to consider an animated transition, or something like that.

Is it possible ?

2

There’s a bunch of Meteor packages for CSS animation. You could consider using one of those.

3

I experimented with this a while ago and was able to implement it with flow-animate-css

1 Like