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

是否有翻译问题（-100％）？如何让这个div从顶部滑入并向上滑动？

Answer 1

转换为转场而非动画。
修复了ng-click on anchor tag，导致页面由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>

Safari上的CSS TranslateY动画

1 个答案: