Hi Ionic Family,
So… I’m working on practicing how to animate elements for Android Applications.
But, I’m not oh too use to using animate.css and jquery with Ionic’s Framework.
If you could, can you please fix the flaw?
The problem is when I click the button “#box1” disappears instead of sliding out
then “#box2” slides in. When I remove the “hide();” for “#box1” in the JS it throws
“#box2” to the bottom under “#box1” where it shouldn’t be.
Note: This project is using Ionic, Cordova, Bootstrap, animate.css and jQuery.
index.html:
<div id="box1" class="center"> <h2>This is awesome!</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan fermentum risus vel finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis imperdiet augue neque, in rutrum elit feugiat a. </p> <p> Nunc neque velit, faucibus et porttitor sit amet, lobortis ac purus. Phasellus imperdiet nec sem eget vestibulum. Aenean ultricies nulla a ligula finibus. </p> <p class="auto"> <button id="box1_btn" class="button button-block button-calm">Click me!</button> </p> </div> <div id="box2" class="center" style="display:none;position:relative;"> <h2>Something else awesome!</h2> <p> Sed quis mauris in enim venenatis aliquet sed ut velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In accumsan sit amet tortor tincidunt varius. Etiam at mi a dolor hendrerit commodo vel eget risus. </p> <p> Maecenas ex neque, commodo in nulla eu, condimentum condimentum nibh. Mauris a consectetur sem. Cras at consectetur ligula. </p> </div>
awesome.js:
$(document).ready(function() { $("#box1_btn").click(function() { $("#box1").addClass("animated bounceOutLeft"); $("#box1").css("display", "none"); $("#box2").show(); $("#box2").addClass("animated bounceInRight"); }); });
Warm regards,
Neonic, Inc.