自定义IonicModal不隐藏在正确的位置

Custom IonicModal not hide at right position

本文关键字：位置 IonicModal 隐藏 自定义      更新时间：2023-09-26

我已经通过改变宽度和高度制作了我的自定义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>

我认为你可以通过设置这个简单的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>

相关文章：