CODEWITHSUNDEEP
angularjsionic-framework
lilbiscuit
lilbiscuit

Reputation: 2249

Ionic v1 modal destroyed before leave animation is complete

When using the default slide-in-up animation for an Ionic (v1) modal, the modal leave animation looks perfect. But when substituting a different animation ( I am using slide-in-right) the modal is destroyed (i.e. removed from the DOM) before the leave animation is done. Here's my code:

JS:

//create the modal
$ionicModal.fromTemplateUrl('templates/my-modal.html', function(modal) {
  $scope.myModal = modal;
  }, {
   scope: $scope,
   animation: 'slide-in-right'
});

//show the modal
$scope.myModal.show()

//hide the modal
$scope.myModal.hide();

and the CSS (the timings are long just for debugging purposes):

.slide-in-right {
  -webkit-transform: translateX(100%);
    transform: translateX(100%); }

.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 2000ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 2000ms; }

.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
  -webkit-transform: translateX(0);
    transform: translateX(0); }

.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
  -webkit-transition: all linear 2800ms;
  transition: all linear 2800ms; }

This causes a noticeable UX hiccup, since the modal is only half way through the leave animation before it just disappears. You can see this here:

http://codepen.io/frey1esm/pen/QvOQjO

The leave timing in this codepen is 2500ms so that's how long the modal should be visible as it slides out to the left. But it gets removed almost instantly. IS there a way to delay the removal of the modal from the DOM?

Upvotes: 0

Views: 257

Answers (1)

Islam Baraka
Islam Baraka

Reputation: 26

i dont know if there a good ionic answer to that anyway my workaround will be custom class conditions http://codepen.io/islam4hak/pen/JNOepN on the ion modal use a condition class name 

 <ion-modal-view ng-class="GoingAway==1 ? 'slide-in-left ng-leave' : ' '">

and for the controller 

  $scope.GoingAway = 0;
  $scope.CustomHide = function(e){
    $scope.GoingAway = 1;
    setTimeout(function(){
          $scope.modal.hide();
         $scope.GoingAway = 0;
    },2600)

  }

Hope that this work for you

Upvotes: 1

Related Questions