Modal window skips its animation the first time it's shown


#1

I have a modal that has a “slide-up” animation. When I open it the first time, it appears instantly. If I then close it and re-open it then the animation works every time after that. Is this a common issue with an improper setup? Here is my modal code:

  //Modal view
  $ionicModal.fromTemplateUrl('./Modals/VideoModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.openModal = function(index) {
    $scope.currentVideo = $scope.videos[index];
    $scope.currentURL = $scope.getEmbedURL($scope.currentVideo.id.videoId);
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  }); 

I use $scope.modal.show and $scope.modal.hide to open/close the modal view. The modal itself just displays an embedded YouTube video via


#2

Not sure if I’m allowed to “bump” topics… but this one has me stumped :confused: