0

在使用 CSS 对元素执行 JQueryUI 的slide转换时，元素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 中的topandtransform允许横幅落入中心。

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

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

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

由于 AngularJS 和ng-views. 我之前使用 JavaScript 来使元素居中，但是将逻辑添加到$(window).resize()事件中会导致其他ng-views. 我需要一种方法将其隔离到特定的ng-view.

有什么我可以用我的动画或 CSS 调整的东西不会导致横幅的上半部分消失吗？

4

1 回答 1

1

从 1.9 开始，toggle 被删除：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 中消失

于 2013-10-10T18:18:32.690 回答