我通过改变宽度和高度来制作我的自定义ionicModal Popup。但是当模态隐藏时，我遇到了处理正确位置的问题。请参阅我的代码段以获得更清晰的信息。
无论模态大小如何，我的预期输出都是ionicModal隐藏在底部为'0'。
var myApp = angular.module('MyApp',['ionic','ngCordova']);
myApp.controller('HomeCtrl',function($scope, $ionicModal){
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.home = function ()
{
$scope.modal.hide();
}
});body
{
background-color:#f3f3f3;
}
.modalEduLevel
{
width: 90%;
height: 80%;
min-height: 0;
max-height: 250px;
top: 20%;
left: 5%;
right: 5%;
bottom: 20%;
border-radius:5px;
border:2px solid gold;
}
.bg-gold
{
background-color: #ffd70080;
}
.button-level
{
background-color: white;
border: 1px solid purple;
color: purple;
font-size: 1.3em;
}
.button-level:hover, .button-level:active
{
background-color: purple;
color:white !important;
}<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
<div ng-app="MyApp" ng-controller="HomeCtrl">
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view class="modalEduLevel">
<ion-pane class="padding bg-gold">
Select your education level
<br/>
<br/>
<button ng-click="home()" class="button button-block button-level">
Level 1
</button>
<button ng-click="home()" class="button button-block button-level">
Level 2
</button>
<button ng-click="home()" class="button button-block button-level">
Level 3
</button>
</ion-pane>
</ion-modal-view>
</script>
<button ng-click="openModal()">Open</button>
</div>
答案 0 :(得分：1)
我想说你可以设置这个简单的CSS声明：
.slide-in-up.ng-leave {
-webkit-transform: translate3d(0px, 500%, 0px);
transform: translate3d(0px, 500%, 0px);
}
Ionic将ng-leave类设置为每个被删除/隐藏的元素等。slide-in-up ng-leave的默认转换为transform: translate3d(0px, 100%, 0px);，与此时相同输入ng-enter。通过将其设置为500％，它肯定会一直移到底部。如果您希望动画在两种情况下都相似，则可以使用ng-enter类执行此操作。如果您希望使用如下声明，也可以覆盖转换时间：
.slide-in-up.ng-leave, .slide-in-up > .ng-leave {
-webkit-transition: all ease-in-out 450ms;
transition: all ease-in-out 450ms;
}
var myApp = angular.module('MyApp', ['ionic', 'ngCordova']);
myApp.controller('HomeCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.home = function() {
$scope.modal.hide();
}
});body {
background-color: #f3f3f3;
}
.modalEduLevel {
width: 90%;
height: 80%;
min-height: 0;
max-height: 250px;
top: 20%;
left: 5%;
right: 5%;
bottom: 20%;
border-radius: 5px;
border: 2px solid gold;
}
.slide-in-up.ng-leave {
-webkit-transform: translate3d(0px, 500%, 0px);
transform: translate3d(0px, 500%, 0px);
}
.bg-gold {
background-color: #ffd70080;
}
.button-level {
background-color: white;
border: 1px solid purple;
color: purple;
font-size: 1.3em;
}
.button-level:hover,
.button-level:active {
background-color: purple;
color: white !important;
}<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
<div ng-app="MyApp" ng-controller="HomeCtrl">
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view class="modalEduLevel">
<ion-pane class="padding bg-gold">
Select your education level
<br/>
<br/>
<button ng-click="home()" class="button button-block button-level">
Level 1
</button>
<button ng-click="home()" class="button button-block button-level">
Level 2
</button>
<button ng-click="home()" class="button button-block button-level">
Level 3
</button>
</ion-pane>
</ion-modal-view>
</script>
<button ng-click="openModal()">Open</button>
</div>
修改
以下是模式中自定义幻灯片功能的演示。
var myApp = angular.module('MyApp', ['ionic', 'ngCordova']);
myApp.controller('HomeCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'custom-slide'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.home = function() {
$scope.modal.hide();
}
});body {
background-color: #f3f3f3;
}
.modalEduLevel {
width: 90%;
height: 80%;
min-height: 0;
max-height: 250px;
top: 20%;
left: 5%;
right: 5%;
bottom: 20%;
border-radius: 5px;
border: 2px solid gold;
}
.bg-gold {
background-color: #ffd70080;
}
.button-level {
background-color: white;
border: 1px solid purple;
color: purple;
font-size: 1.3em;
}
.button-level:hover,
.button-level:active {
background-color: purple;
color: white !important;
}
.custom-slide {
top: 100% !important;
opacity: 0 !important;
}
.custom-slide.ng-enter-active {
top: 20% !important;
opacity: 1 !important;
transition: opacity 150ms ease-in-out, top 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.custom-slide.ng-leave {
top: 100%;
opacity: 0;
transition: opacity 450ms ease-in-out, top 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.custom-slide.ng-leave .button-level:hover,
.custom-slide.ng-leave .button-level:active {
background-color: white;
color: purple !important;
}<link href="https://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet" />
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
<div ng-app="MyApp" ng-controller="HomeCtrl">
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view class="modalEduLevel">
<ion-pane class="padding bg-gold">
Select your education level
<br/>
<br/>
<button ng-click="home()" class="button button-block button-level">
Level 1
</button>
<button ng-click="home()" class="button button-block button-level">
Level 2
</button>
<button ng-click="home()" class="button button-block button-level">
Level 3
</button>
</ion-pane>
</ion-modal-view>
</script>
<button ng-click="openModal()">Open</button>
</div>