[英]JQuery UI `Slide` Transition Issues With CSS `transform
When executing JQueryUI's slide
transition on an element with a CSS transform
the top half of the element is being hidden during the animation. 在使用CSS
transform
对元素执行JQueryUI的slide
过渡时,该元素的上半部分在动画过程中被隐藏。 Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening? 有什么方法可以调整JQueryUI动画和/或CSS来防止这种情况发生?
JSFiddle : I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/ JSFiddle :我用适当的代码创建了一个JSFiddle- http://jsfiddle.net/9dTkL/4/
To accomplish the vertical centering, I do the following: 要完成垂直居中,请执行以下操作:
<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>
The top
and transform
within the CSS allow the banner to fall into the center. CSS的
top
和transform
允许横幅落入中心。
To perform the animation, I execute the following: 要执行动画,我执行以下操作:
$('#banner-welcome').toggle(
'slide',
function()
{
document.location.href = "#/" + destination;
}
);
When the animation starts the top half of the #welcome-banner
disappears, and the bottom half animates. 动画开始时,
#welcome-banner
的上半部分消失,下半部分动画。 I've removed the transform
from the CSS and everything works great -- except that my banner is no longer centered. 我已经从CSS中删除了
transform
,并且一切正常-只是我的横幅不再居中。
I am performing the vertical centering this way due to a combination of AngularJS and ng-views
. 由于AngularJS和
ng-views
的结合,我以这种方式执行垂直居中。 I had previously used JavaScript to center the element, but adding the logic to the $(window).resize()
event caused problems in other ng-views
. 我以前曾使用JavaScript来使元素居中,但是将逻辑添加到
$(window).resize()
事件会在其他ng-views
引起问题。 I needed a way to isolate this to the specific ng-view
. 我需要一种将其隔离到特定的
ng-view
。
Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear? 我可以通过动画或CSS进行调整,而不会导致横幅的上半部分消失吗?
toggle is removed as of 1.9: http://api.jquery.com/toggle-event/ 从1.9开始,切换功能已删除: http : //api.jquery.com/toggle-event/
so please use animate or slideDown or slideUp method 所以请使用动画或slideDown或slideUp方法
also the transform property doesn't need prefixes 也变换属性不需要前缀
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
have you tried adding transform-origin property 您是否尝试过添加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%);
}
im not seeing the top part disappear in latest Firefox 24 我在最新的Firefox 24中看不到顶部消失
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.