CSS3 Преобразование положения объектов без применения Transition - PullRequest
Новая
       24

CSS3 Преобразование положения объектов без применения Transition

2 голосов
/ 21 июля 2011

Я ищу простой способ взять объект и преобразовать его свойство rotateY без его анимации к его предварительно установленному переходу.

Это будет выглядеть примерно так: 

$(this).css("-webkit-transform","rotateY(180deg)");
$(this).css("-webkit-transition","10s");

потом в коде 

$(this).css("-webkit-transform","rotateY(0)");
$(this).css("-webkit-transition","0");

Но вышесказанное мне не совсем подходит из-за того, что нужно установить и сбросить время анимации переходов.

Мне нужнорешение, которое просто переносит объект из точки a в b без суеты.Кажется, я не могу найти способ установить свойство rotateY без прохождения префикса перехода / преобразования.

Любая помощь будет отличной, заранее спасибо.

Ответы [ 2 ]

1 голос
/ 06 июня 2012

То, что вам нужно, звучит как анимация CSS3.

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

$(this).css("-webkit-animation", "someanimation 10s forwards");

Свойство forward в анимации CSS3 гарантирует, что конечная точка в анимации является постоянным визуализированным стилем, поэтому анимация будет оставаться в своем конечном состоянии до тех пор, пока вы не разгрузите страницу.

В вашем CSS вы должны добавить 

@-webkit-keyframes someanimation { <br />
    0% {-webkit-transform: rotateY(180deg);} <br />
    100% {-webkit-transform: rotateY(0deg);} <br />
}

Этот код выше не относится к какому-либо классу или идентификатору. Это его собственный раздел.

Вот некоторая документация по анимации CSS3 Стандарт W3C

А вот статья Smashing Mag

0 голосов
/ 09 июня 2015

Вот то, что вы хотите -

http://jsfiddle.net/rq0574yz/2/

Я добавил 'S' и установил border-right: 5px solid red, чтобы вы могли видеть, что он на самом деле возвращается в исходное положение без перехода. На самом деле это происходит с переходом, но в ключевом кадре я сократил конкретную длительность перехода до нескольких миллисекунд (20 миллисекунд), чтобы пользователь не распознал и не подумал, что он вернулся в мгновение ока.

...