Safari 上的 CSS TranslateY 动画

Question

我想使用 CSS 从顶部滑入全屏 div。我正在使用 AngularJS（离子框架），但试图保持这个动画纯 css。 div 不会在 Safari 中向下滑动（在 Chrome 中有效） - 它只是出现。但它会正确滑回。代码如下：

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;
}

translateY(-100%) 有问题吗？如何让这个 div 从顶部滑入并向上滑动？

Answer 1

• 转换为过渡而不是动画。
• 修复了 ng-click 锚标记导致页面通过 preventDefault() 发布的问题。
• 将显示/隐藏转换为切换。

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>