CSS`transform的JQuery UI`Slide`过渡问题

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

从1.9开始，切换功能已删除： http : //api.jquery.com/toggle-event/

所以请使用动画或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中看不到顶部消失