JQuery UI“幻灯片”过渡问题与CSS“转换

JQuery UI `Slide` Transition Issues With CSS `transform

本文关键字：幻灯片 CSS 转换 问题 UI JQuery      更新时间：2023-09-26

当在带有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 调整一些不会导致横幅上半部分消失的东西吗？

切换开关从 1.9 开始被删除：http://api.jquery.com/toggle-event/

所以请使用动画或向下滑动或向上滑动方法

此外，转换属性不需要前缀

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

您是否尝试过添加转换源属性

#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中消失

相关文章：