CSS TranslateY Animation on Safari

Question

I want to slide in a fullscreen div from the top using CSS. I am using AngularJS (ionic framework) but attempting to keep this animation pure css. The div won't slide down in Safari (works in Chrome) - it just appears. But it will slide back up properly.Here's the code:

HTML:

<div class="slideDown ng-hide" id="gallery-overlay" ng-show="showGallery" ng-click="hideGalleryClick()"></div>

CSS:

.slideDown{
    -webkit-animation-name: slideDown;  
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;    
    visibility: visible !important;                     
}
@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }       
    100% {
        -webkit-transform: translateY(0%);
    }   
}
.slideUp{
    -webkit-animation-name: slideUp;    
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;         
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0%);
    }       
    100% {
        -webkit-transform: translateY(-100%);
    }   
}

JS:

$scope.showGalleryClick = function() {    
  $('#gallery-overlay').removeClass('slideUp');
  $('#gallery-overlay').addClass('slideDown');
  $scope.showGallery = true;
}

$scope.hideGalleryClick = function() {
  $('#gallery-overlay').removeClass('slideDown');
  $('#gallery-overlay').addClass('slideUp');
  $scope.showGallery = false;
}

Is the problem with translateY(-100%) ?? How can I make this div slide in from the top and slide back up?

Answer 1

• Converted to transitions instead of animations.
• Fixed ng-click on anchor tag causing page to post by preventDefault().
• Converted show/hide to toggle.

function GalleryCtrl($scope) {
  $scope.toggleGallery = function($event) {
    angular.element(document.querySelector('#gallery-overlay')).toggleClass('slideDown');
    $event.preventDefault();
    $event.stopPropagation(); /* Not required, but likely good */
  };
}

#gallery-overlay {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #222;
  transition: all 1s ease;
}
#gallery-overlay.slideDown {
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="GalleryCtrl">
    <div>
      <a href="" ng-click="toggleGallery($event)">Click me to slide panel down</a>
    </div>
    <div id="gallery-overlay" ng-click="toggleGallery($event)"></div>
  </div>
</div>