CSS3 перевод из экрана

Ответ 1

Я знаю, что это не совсем то, что вы просили, но...

Не могли бы вы использовать анимацию CSS с Greensock Animation Platform? Это ужасно быстро (он утверждает это в 20 раз быстрее, чем jQuery), вы можете увидеть тест скорости здесь: http://www.greensock.com/js/speed.html

Это сделало бы ваш код лучше, чем я, и вместо того, чтобы пытаться взломать анимацию CSS, вы могли бы сосредоточиться на более важных вещах.

Я создал JSFiddle здесь: http://jsfiddle.net/ATcpw/4/

Оба CSS и возможные JS выглядят проще:

document.querySelector("button").addEventListener("click",function(){
    var toAnimate = document.querySelector(".block");
    TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});

CSS

.block{
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background-image: url(http://lorempixel.com/800/100);
}

Ответ 2

Если вы завернете div.block контейнером:

<div class="container">
   <div class="block"></div>
</div>
<button>Click</button>

вы можете развернуть, а затем перевести сам контейнер после события click

document.querySelector("button").addEventListener("click", function () {
   document.querySelector(".container").classList.add("hide");
});

с этим стилем

.block {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background:gray;
}

.container {
    -webkit-transition: -webkit-transform ease-in-out 1s;
    -webkit-transform-origin: top;
    -webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}

.container.hide {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /* background:#f00; /* Uncomment to see the affected area */ 
    -webkit-transform: translateY(-110%);
}

Таким образом, можно применить правильный процент перевода (чуть более 100%, просто чтобы он был в стороне) и поддерживал нажатие кнопки.

Здесь вы можете увидеть рабочий пример: http://jsfiddle.net/MG7bK/

P.S: Я заметил, что задержка перехода необходима только для свойства transitionY, иначе анимация потерпит неудачу, вероятно, потому, что она пытается начать, прежде чем иметь фактическое значение для высоты. Его можно опустить, если вы используете горизонтальное исчезновение, с translateX.

Ответ 3

Недавно я создал приложение, которое использовало именно эту технику для раздвижения "панелей" (или страниц) и вкладок приложения в или вне поля зрения. Ниже представлена ​​базовая реализация механизма вкладок.

В принципе (pesudo-код для иллюстрации концепции, минус префиксы и т.д.):

.page {
    transform: translateY(100%);
}

.page.active {
    transform: translateY(0%);
}

Проблема была в том, что Android Webkit, в частности, не будет правильно вычислять процентные значения. В конце мне пришлось использовать script, чтобы захватить ширину видового экрана и указать значение в пикселях, затем написать правила, используя библиотеку для динамического разбора стилей.

Но в конце концов, и, несмотря на только незначительные проблемы с конкретной платформой, это отлично сработало для меня.

Ответ 4

То, что я сделал, это использовать блок vh (высота представления). Это всегда относительно размера экрана, а не самого элемента:

/* moves the element one screen height down */
translateY(calc(100vh))

Итак, если вы знаете позицию элемента на экране (скажем top:320px), вы можете переместить его точно на экран:

/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))

Ответ 5

Использовать метод calc (http://jsfiddle.net/ATcpw/2/):

.block{
    position:absolute;
    top: -webkit-calc(100% - 110px);
    right:10px;
    left:10px;
    height:100px;
    background:gray;
    -webkit-transition: all 2s;
    /*this adds GPU acceleration*/
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0);
}
.block.hide{
    top: -100px;
}

Поскольку вы используете префикс -webkit, я использовал его также. calc поддерживается большинством браузеров: http://caniuse.com/#search=calc

Ответ 6

Одно очень простое, но не эстетически приемлемое решение - динамически определять класс:

var stylesheet = document.styleSheets[0];
var ruleBlockHide;

и

//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);

см. http://jsfiddle.net/PDU7T/

Причина, по которой необходимо сохранить ссылку на правило, заключается в том, что после каждого изменения размера экрана правило должно быть удалено и повторно добавлено.

Несмотря на то, что это решение выполняет свою работу, должна быть какая-то комбинация DOM/CSS, которая позволила бы это сделать без javascript (что-то вроде строк 100% x100%, содержащих такой блок, но я не знаю, t удалось найти способ, основанный на трансформации).

Ответ 7

получить ширину документа. затем используйте триггер java script для запуска преобразования css3.

       function translate(){

       var width = document.body.Width;
        document.getElementById('whateverdiv').style='translateX(' + width + 'px)';

       }

Ответ 8

Это просто добавьте следующее в свой div

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

то измените свойство "left", либо добавив дополнительный класс, либо jQuery

Это будет анимировать его вдоль оси x

Примечание. вы можете изменить свойство -webkit-transition-property на любое свойство, которое вы хотите, и это будет анимировать его