JQuery UI `Slide` Проблемы с переходом с CSS` transform

Question

При выполнении перехода JQueryUI slide на элемент с CSS 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> 

top и transform в CSS ПОЗВОЛЯЮТ баннер упадет в центр.

Чтобы выполнить анимацию, я выполнить следующее:

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

Когда анимация начинает верхнюю половину #welcome-banner исчезает, а нижняя половина оживляет. Я удалил transform из CSS и все отлично работает, за исключением того, что мой баннер больше не центрирован.

Я выполняю вертикальное центрирование таким образом из-за комбинации 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%); 
} 

im не видя, что верхняя часть исчезает в последних версиях Firefox 24