Source language: Translate to:

Help using 3rd party CSS animation lib

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Help using 3rd party CSS animation lib

Postby TinTin » Sun Jun 12, 2016 3:42 am

Hi all,

I need a little assistance - need to use this animation lib..

https://daneden.github.io/animate.css/

I've added the animate.css to the libraries and files ion NAB..

If I was to animate an element / specifically page exit / enter how easy would that be??

I know NAB has animated library built in, however it's not working correctly in the browser I am needing to use (I have a feeling it's because its only the minified version of angular-animate.js that is used, and I've tested the library above
which works correctly within the browser.

Thanks in advance for your help peeps.

Tin,
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Help using 3rd party CSS animation lib

Postby Gaev » Sun Jun 12, 2016 5:21 am

TinTin:

If I was to animate an element / specifically page exit / enter how easy would that be??

"PageEnter/PageExit" are not elements ... I am assuming that you meant to say "animate an element during an event like PageEnter/PageExit".

I would suggest that you first it try out for another event (like a Button Click/Press) to avoid any possible problems with the sequence of events (e.g. trying to animate elements on the older page after moving to the newer page.

From their documentation here ... https://github.com/daneden/animate.css ...
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

... you can code this for the Click event for a Button ... and specify a Picture element for #yourElement (note yourElement would be the name/id of your Picture Element; without the # character)

You can study the source code of their demo page ... view-source:https://daneden.github.io/animate.css/ ... to further understand how it works.
User avatar
Gaev
 
Posts: 3718
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Help using 3rd party CSS animation lib

Postby TinTin » Sun Jun 12, 2016 5:30 am

Hi Gaev,

Totally got that bit, I had initially tried

$('#yourElement').animateCss('bounce');

So was missing the .addClass!

Thanks so much.. I'll have a play with page exit and enter transitions.. :-)
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Help using 3rd party CSS animation lib

Postby TinTin » Sun Jun 12, 2016 5:35 am

I'm using as an example to animate / exit the page...


BeginJS
$('#NewPage').addClass('animated bounceOutLeft');
EndJS

Where's best to do this, as 'page-exit' is too late.. is there anyway to override the default page transitions CSS without me having to
code each page transition whenever I'm heading to a new page??

Cheers
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Help using 3rd party CSS animation lib

Postby TinTin » Sun Jun 12, 2016 7:10 am

Hi All,

Just been testing this today, it's got some really nice transitions, with a bit of 'tinkering' you can add these to elements, page enter and exits and works well.

I'm not sure what webkit version the default transitions in NAB work to, but for some reason on the browser I am using which isn't chrome or IE - it works with this new lib and not the
default one built in NAB, like I said it could be the fact NAB deafults to using just minified version of angular-animate.js - but can't be sure.

Cheers
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK

Re: Help using 3rd party CSS animation lib

Postby Gaev » Sun Jun 12, 2016 7:21 am

TinTin:

I'm using as an example to animate / exit the page...

BeginJS
$('#NewPage').addClass('animated bounceOutLeft');
EndJS

Where's best to do this, as 'page-exit' is too late..

I am not sure what your requirement is ...

a) What is #NewPage ? ... is it the name of the page you want to navigate to ? ... or some element within it ? ... if it is the whole page, have you verified that you can apply animation to a whole page ? ... by invoking this outside of a Page Change event ? e.g. in a Button Click event ?

b) Where did you place this code ? ... in the PageExit event section of another page ?

c) Say you have 5 pages ... Page1 to Page5 ... do you want to animate an element in Page3 whenever you exit any of the other pages ... please provide details

is there anyway to override the default page transitions CSS without me having to code each page transition whenever I'm heading to a new page??

For a common animation of the page you are navigating to ... the best place would be the PageEnter event section.

For a common animation of those/all the pages you are navigating from ... you can add a line of code in the PageExit section (of each page) ... have this line call a subroutine.
User avatar
Gaev
 
Posts: 3718
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Help using 3rd party CSS animation lib

Postby TinTin » Sun Jun 12, 2016 7:28 am

That's great thank you Gaev,

I wasn't sure if the page exit routine was called in time for the transition to finish - but it's actually working really well now :-)

Thanks for your help it's been extremely helpful.

Cheers.
TinTin
 
Posts: 162
Joined: Sun Dec 06, 2009 4:03 am
Location: UK


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 0 guests