Question

在具有CSS slide的元素上执行JQueryUI的transform转换时，在动画期间隐藏了元素的上半部分。有什么方法可以调整我的JQueryUI动画和/或CSS来防止这种情况发生吗？

JSFiddle ：我用适当的代码创建了一个JSFiddle - http://jsfiddle.net/9dTkL/4/

要完成垂直居中，我会执行以下操作：

<style>
#banner-welcome {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
</style>

CSS中的top和transform允许横幅落入中心。

要执行动画，我执行以下操作：

$('#banner-welcome').toggle(
  'slide',
  function()
  {
    document.location.href = "#/" + destination;
  }
);

当动画开始时，#welcome-banner的上半部分消失，下半部分动画。我已经从CSS中移除了transform，一切都很好 - 除了我的横幅不再居中。

由于AngularJS和ng-views的组合，我正在以这种方式执行垂直居中。我之前使用JavaScript来使元素居中，但在$(window).resize()事件中添加逻辑会导致其他ng-views出现问题。我需要一种方法将其与特定ng-view隔离。

我可以使用动画或CSS调整哪些内容不会导致横幅的上半部分消失吗？

Answer 1

自1.9：http://api.jquery.com/toggle-event/

起，

切换功能已被移除

所以请使用animate或slideDown或slideUp方法

转换属性不需要前缀

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform: translateY(-50%);
}

您是否尝试过添加 transform-origin 属性

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform-origin: 50% 50% 0;
    transform: translateY(-50%);
}

我在最新的Firefox 24中没有看到顶部消失

使用CSS`转换的JQuery UI`Slide`转换问题

1 个答案: