综合编程

JQuery UI `Slide` Transition Issues With CSS `transform

微信扫一扫,分享到朋友圈

JQuery UI `Slide` Transition Issues With CSS `transform
0 0

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. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?

JSFiddle: I've created a JSFiddle with the appropriate code - 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.

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. I've removed the transform
from the CSS and everything works great -- except that my banner is no longer centered.

I am performing the vertical centering this way due to a combination of AngularJS and 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
. I needed a way to isolate this to the specific 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?

Problem courtesy of: Evil Closet Monkey

Solution

toggle is removed as of 1.9: http://api.jquery.com/toggle-event/

so please use animate or slideDown or slideUp method

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

#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

Solution courtesy of: Jonathan Marzullo

CSS3 Recipes
感谢您的支持!

    Lumigo: End-to-End Serverless Monitoring and Troubleshooting

    上一篇

    Doomsday Docker security hole uncovered

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片