Safari上的CSS TranslateY动画 [英] CSS TranslateY Animation on Safari

问题描述

我想使用CSS从顶部滑动到全屏div中.我正在使用AngularJS(离子框架)，但尝试保持此动画为纯CSS.div不会在Safari中滑落(可在Chrome中运行)-它只会出现.但是它将正确地滑回.代码如下:

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

translateY(-100％)是问题吗?如何使该div从顶部滑入并向后滑动?

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

推荐答案

• 已转换为转场而不是动画.
• 修复了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>

这篇关于Safari上的CSS TranslateY动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！