angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$scope.modalAnimations = ['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'
]
$scope.showModal = function(animation) {
console.log(animation);
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope,
animation: 'animated ' + animation,
hideDelay:1020
}).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();
}
});
};
});
.animated.modal.bounceIn.ng-leave {
-webkit-animation-name:bounceOut;
animation-name:bounceOut;
}
.animated.modal.bounceInDown.ng-leave {
-webkit-animation-name:bounceOutUp;
animation-name:bounceOutUp;
}
.animated.modal.bounceInLeft.ng-leave {
-webkit-animation-name:bounceOutLeft;
animation-name:bounceOutLeft;
}
.animated.modal.bounceInRight.ng-leave {
-webkit-animation-name:bounceOutRight;
animation-name:bounceOutRight;
}
.animated.modal.bounceInUp.ng-leave {
-webkit-animation-name:bounceOutDown;
animation-name:bounceOutDown;
}
.animated.modal.bounceOut.ng-leave {
-webkit-animation-name:bounceOut;
animation-name:bounceOut;
}
.animated.modal.fadeIn.ng-leave {
-webkit-animation-name:fadeOut;
animation-name:fadeOut;
}
.animated.modal.fadeInDown.ng-leave {
-webkit-animation-name:fadeOutDown;
animation-name:fadeOutDown;
}
.animated.modal.fadeInDownBig.ng-leave {
-webkit-animation-name:fadeOutDownBig;
animation-name:fadeOutDownBig;
}
.animated.modal.fadeInLeft.ng-leave {
-webkit-animation-name:fadeOutLeft;
animation-name:fadeOutLeft;
}
.animated.modal.fadeInLeftBig.ng-leave {
-webkit-animation-name:fadeOutLeftBig;
animation-name:fadeOutLeftBig;
}
.animated.modal.fadeInRight.ng-leave {
-webkit-animation-name:fadeOutRight;
animation-name:fadeOutRight;
}
.animated.modal.fadeInRightBig.ng-leave {
-webkit-animation-name:fadeOutRightBig;
animation-name:fadeOutRightBig;
}
.animated.modal.fadeInUp.ng-leave {
-webkit-animation-name:fadeOutUp;
animation-name:fadeOutUp;
}
.animated.modal.fadeInUpBig.ng-leave {
-webkit-animation-name:fadeOutUpBig;
animation-name:fadeOutUpBig;
}
.animated.modal.flipInX.ng-leave {
-webkit-animation-name:flipOutX;
animation-name:flipOutX;
}
.animated.modal.flipInY.ng-leave {
-webkit-animation-name:flipOutY;
animation-name:flipOutY;
}
.animated.modal.lightSpeedIn.ng-leave {
-webkit-animation-name:lightSpeedOut;
animation-name:lightSpeedOut;
}
.animated.modal.rotateIn.ng-leave {
-webkit-animation-name:rotateOut;
animation-name:rotateOut;
}
.animated.modal.rotateInDownLeft.ng-leave {
-webkit-animation-name:rotateOutDownLeft;
animation-name:rotateOutDownLeft;
}
.animated.modal.rotateInDownRight.ng-leave {
-webkit-animation-name:rotateOutDownRight;
animation-name:rotateOutDownRight;
}
.animated.modal.rotateInUpLeft.ng-leave {
-webkit-animation-name:rotateOutUpLeft;
animation-name:rotateOutUpLeft;
}
.animated.modal.rotateInUpRight.ng-leave {
-webkit-animation-name:rotateOutUpRight;
animation-name:rotateOutUpRight;
}
.animated.modal.slideInUp.ng-leave {
-webkit-animation-name:slideOutDown;
animation-name:slideOutDown;
}
.animated.modal.slideInDown.ng-leave {
-webkit-animation-name:slideOutUp;
animation-name:slideOutUp;
}
.animated.modal.slideInLeft.ng-leave {
-webkit-animation-name:slideOutLeft;
animation-name:slideOutLeft;
}
.animated.modal.slideInRight.ng-leave {
-webkit-animation-name:slideOutRight;
animation-name:slideOutRight;
}
.animated.modal.zoomIn.ng-leave {
-webkit-animation-name:zoomOut;
animation-name:zoomOut;
}
.animated.modal.zoomInDown.ng-leave {
-webkit-animation-name:zoomOutDown;
animation-name:zoomOutDown;
}
.animated.modal.zoomInLeft.ng-leave {
-webkit-animation-name:zoomOutLeft;
animation-name:zoomOutLeft;
}
.animated.modal.zoomInRight.ng-leave {
-webkit-animation-name:zoomOutRight;
animation-name:zoomOutRight;
}
.animated.modal.zoomInUp.ng-leave {
-webkit-animation-name:zoomOutUp;
animation-name:zoomOutUp;
}
.animated.modal.rollIn.ng-leave {
-webkit-animation-name:rollOut;
animation-name:rollOut;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href="css/style.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Animate Modals</h1>
<div class="buttons">
<a href="https://github.com/kevincobain2000/ionic-animated-modal" class="button button-icon ion-social-github">
</a>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="modalAnimation in modalAnimations" ng-click="showModal(modalAnimation)">
{{modalAnimation}}
</ion-item>
</ion-list>
</ion-content>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Animate Css Modals</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<h3>How it works?</h3>
<a href="https://github.com/kevincobain2000/ionic-animated-modal" title="">
README https://github.com/kevincobain2000/ionic-animated-modal
</a>
<p>
<button class="button button-full button-positive" ng-click="hideModal()">CLOSE</button>
</p>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>
默認模態位置是相對的。你需要設置模式的位置:絕對的風格 – digit