CSS3 перемещать, а затем анимировать

Я пытаюсь анимировать свои страницы с помощью переходов css3. Мне нужно иметь возможность перемещать элемент, а затем анимировать с помощью css3. Например, переместите скрытый div с экрана, а затем анимируйте его обратно на экран. Звучит странно, я знаю, но я упростил свое объяснение, и мне действительно нужна эта функциональность. Итак, в приведенном ниже коде я хочу переместить элемент на 400 пикселей влево, а затем анимировать его до 0. Итак... без анимации перемещать 400 пикселей, добавить класс перехода CSS3 и анимировать до 0 пикселей. Надеюсь, я объяснил это нормально... спасибо за любую помощь.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
    .box{
        height:100px;
        width:100px;
        background-color:green;
        position:absolute;
        top:100px;
    }
    .animator{
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
    }
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.box').css({left:'400px'});
        $('.box').addClass('animator');
        $('.box').css({left:'0px'});

    });

</script>
</head>
<body>
<div class="box">1</div>
</body>
</html>

css css-transitions
person Paul Thompson    schedule 15.04.2012    source источник
comment
+1 за будущее Интернета! CSS3 фтв :D   -  person william44isme    schedule 12.04.2013

Ответы (4)


arrow_upward
0
arrow_downward

на этой странице есть отличное объяснение того, как использовать анимацию CSS3.

https://developer.mozilla.org/en/CSS/CSS_animations

то, что я думаю, что вы, возможно, ищете, это «ключевые кадры», и это объясняет их на этой странице, кажется, что вы все равно ищете, возможно, вы можете немного уточнить свой вопрос?

person Christopher Thomas    schedule 15.04.2012
comment
Привет Кристофер, я хорошенько посмотрю на эту страницу. Если вы зайдете на мой веб-сайт freelancerlondon.com, вы увидите, что я использовал анимацию jquery для отображения страниц в Пользователь. Я пытаюсь преобразовать эти анимации в анимации CSS3 (если они доступны). Итак, что мне нужно сделать, это переместить страницы (div) вправо от экрана, а затем анимировать их в видимой области. - person Paul Thompson; 15.04.2012
comment
У меня есть решение вышеуказанной проблемы. function animateMe(){ $('.box').addClass('аниматор'); $('.box').css({left:'0px'}); } $(document).ready(function(){ $('.box').css({left:'400px'}); setTimeout(animateMe(),1); }); с помощью тайм-аута, хотя он очень мал, он дает экрану время для обновления. Таким образом, класс анимации css3 добавляется только после перемещения элемента. Спасибо за ответы Павел - person Paul Thompson; 15.04.2012
comment
мне кажется, что на странице было именно то, что вам нужно, ключевые кадры. вот ссылка на конкретный пример developer.mozilla.org/samples/cssref/ animations/cssanim4.html вам нужна многоступенчатая анимация с ключевыми кадрами для вашей страницы, тогда это именно то, что вам нужно. - person Christopher Thomas; 15.04.2012
comment
Спасибо, Кристофер, я решил свою проблему и опубликую решение через x часов (мне нужно подождать, чтобы ответить на мой собственный вопрос ... низкая репутация). Эта страница потрясающая и добавлена ​​​​в мои избранные для дальнейшего изучения. - person Paul Thompson; 15.04.2012

arrow_upward
0
arrow_downward

Я думаю, это должно сделать

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});
person Starx    schedule 15.04.2012
comment
Спасибо, но это не работает. Ну, это так .... но не так, как мне нужно, чтобы это работало .... Мне нужно мгновенно переместить div в нужное положение, а затем анимировать его. Если вы попытаетесь сделать вышеописанное, вы увидите, что исчезновение вызывает задержку . Если вы укажете продолжительность 0, то класс анимации будет добавлен слишком рано, то есть до того, как экран обновится с новой позицией div... заставляя его скользить в новую позицию, а не перемещаться туда мгновенно... надеюсь, что это имеет смысл . - person Paul Thompson; 15.04.2012

arrow_upward
0
arrow_downward

Анимация выполняется в конце стека приложений. Итак, если вы написали:

// initial state -> elment has left 0
$('.box').css({left:'400px'}); // set left to 400
$('.box').addClass('animator');// set animation duration to 1.5s
$('.box').css({left:'0px'});   // set left to 0
// perform animation from 0 to 0

Если вы хотите разбить стек и выполнять операции браузера, вы можете использовать window.setTimeout:

$('.box').css({left:'400px'}); // set left to 400
// move element from 0 to 400
window.setTimeout(function(){  
     $('.box').addClass('animator');// set animation duration to 1.5s
     $('.box').css({left:'0px'});   // set left to 0
},1)
// perform animation from 400 to 0
person Zdeněk Mlčoch    schedule 01.12.2012
comment
Привет, Тал. Это тот же код, который я использовал, чтобы показать, что он не работает? Метод тайм-аута работает, но вам нужно добавить хотя бы 1 миллисекунду. Я отказался от использования анимации CSS3 из-за отсутствия контроля. Мне нужно было знать, когда анимация закончилась. К сожалению, событие завершения не срабатывает в некоторых браузерах, и мне пришлось провести опрос, чтобы убедиться, что анимация действительно закончилась. Так что это было слишком сложно. - person Paul Thompson; 02.12.2012
comment
Я не заметил вашего решения, поэтому не буду удалять свой ответ. Я оставлю это здесь для быстрого чтения. - person Zdeněk Mlčoch; 03.12.2012

arrow_upward
0
arrow_downward

Простой тайм-аут Javascript в несколько миллисекунд позволит браузеру изменить положение элемента, а затем применить преобразование впоследствии.

$(document).ready(function(){

    $('.box').css({left:'400px'})
       .addClass('animator');
    setTimeout(function(){
       $('.box').css({left:'0px'});
    },15);

});
person bronkula    schedule 25.09.2015