JQuery UI`Slide`转换问题与CSS`transform

Question

当在具有 CSS transform 的元素上执行 JQueryUI 的 slide 转换时，元素的上半部分在动画期间被隐藏。有什么方法可以调整我的 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

toggle 从 1.9 开始被移除：http://api.jquery.com/toggle-event/

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

transform 属性也不需要需要前缀

#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 中没有看到顶部消失