Need help with ionic-animated-modal?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kevincobain2000
123 Stars 23 Forks 12 Commits 1 Opened issues

Description

When animate css and ionic modal meet

Services available

!
?

Need anything else?

Contributors list

# 112,166
PHP
CSS
Laravel
overlay
12 commits

I tweeted

https://twitter.com/kevincobain2000/status/632367134643892224

Personal favorite
bounceIn

I use that in my app. http://friendsapp.parseapp.com/

DEMO (codepen)

alt tag

http://codepen.io/kevincobain2000/pen/EjJzjx

How TO

Add Animate css

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


Copy Style.css


Stylesheet is here = https://github.com/kevincobain2000/ionic-animated-modal/tree/master/www/css

Using it

HTML

showModal bounceIn

In your controller

  $scope.showModal = function(animation) {
    console.log(animation);
    $ionicModal.fromTemplateUrl('templates/modal.html', {
      scope: $scope,
      animation: 'animated ' + animation,
      hideDelay:920
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();
      $scope.hideModal = function(){
        $scope.modal.hide();
        // Note that $scope.$on('destroy') isn't called in new ionic builds where cache is used
        // It is important to remove the modal to avoid memory leaks
        $scope.modal.remove();
      }
    });
  };

List of Animations

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
rollIn

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.