Ionic Animated Modal Save

When animate css and ionic modal meet

Project README

I tweeted

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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/

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet">

Copy Style.css

<link href="https://rawgit.com/kevincobain2000/ionic-animated-modal/master/www/css/style.css" rel="stylesheet">

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

Using it

HTML

<button type="" class="button" ng-click="showModal('bounceIn')">showModal bounceIn</button>

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
Open Source Agenda is not affiliated with "Ionic Animated Modal" Project. README Source: kevincobain2000/ionic-animated-modal
Stars
123
Open Issues
1
Last Commit
8 years ago

Open Source Agenda Badge

Open Source Agenda Rating