如何離子

Question

喜加適量餘量模式具有以下在我的控制器：

$ionicModal.fromTemplateUrl('templates/selectTemplateModal.html', { 
     self: self, 
     animation: 'slide-in-up', 
    }).then(function(modal) { 
     self.modal = modal; 
    }); 

    self.openModal = function() { 
     self.modal.show(); 
    }; 

    self.closeModal = function() { 
     self.modal.hide(); 
    }; 

而我的HTML和CSS的模式是如下：

<ion-modal-view id="templateModal" style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"> 
    <ion-header-bar> 
     <h1 class = "title">Modal Title</h1> 
    </ion-header-bar> 

    <ion-content> 

    </ion-content> 
</ion-modal-view> 

<style> 
.modal-backdrop-bg { 
    transition: opacity 300ms ease-in-out; 
    -webkit-transition: opacity 300ms ease-in-out; 
    background-color: #000; 
    opacity: 0; 
} 

.active .modal-backdrop-bg { 
    opacity: 0.5; 
} 
</style> 

不管多少我試圖添加我的模式沒有到達中心的邊距。

Answer 1

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>