Skip to content

Small module that works with ostrio:flow-router-extra to add animation page transitions

Notifications You must be signed in to change notification settings

jamgold/flow-animate-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Small module that works with ostrio:flow-router-extra or kadira:flow-router.

It overrides two methods on the client to wait for animation to finish before leaving a page.

This package suplies animate.css

The default for this package is to look for FlowRouter.animationElement = 'div.animated' Examples:

{{! by specifying the animation in CSS}}
<template name="pageOne">
	{{! this needs to match FlowRouter.animationElement }}
	<div class="animated fadeIn" data-animation-out="fadeOut">
		<h1>Page One</h1>
	</div>
</template>
{{! by using a helper based on the animation defined in the route}}
<template name="pageTwo">
	{{#animatedRoute}}
		<h1>Page Two</h1>
	{{/animatedRoute}}
</template>
{{! by specifing the animation when calling the helper}}
<template name="pageThree">
	{{#animatedRoute animationIn="fadeIn" animationOut="fadeOut"}}
		<h1>Page Three</h1>
	{{/animatedRoute}}
</template>

About

Small module that works with ostrio:flow-router-extra to add animation page transitions

Resources

Stars

Watchers

Forks

Packages