CSS3 преместете и след това анимирайте

Опитвам се да анимирам страниците си с помощта на css3 преходи. Трябва да мога да преместя елемент и след това да анимирам с помощта на css3. Например преместете скрит div извън екрана и след това го анимирайте обратно на екрана. Звучи странно, знам, но опростих обяснението си и наистина имам нужда от тази функционалност. Така че в кода по-долу искам да преместя елемента 400px наляво и след това да го анимирам до 0. И така... без анимация, преместете 400px, добавете CSS3 преходен клас и анимирайте до 0px. Надявам се, че го обясних добре ... благодаря за всякаква помощ.

<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 ftw :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
Имам решение на горния проблем. функция animateMe(){ $('.box').addClass('animator'); $('.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 в позиция и след това да го анимирам. Ако опитате и направите горното, ще видите, че fadein причинява забавяне . Ако зададете продължителност 0, тогава анимираният клас се добавя твърде рано, т.е. преди екранът да се актуализира с новата позиция на div...като го кара да се плъзне към новата позиция и да не се премести там моментално.....надявам се, че има смисъл . - person Paul Thompson; 15.04.2012

arrow_upward
0
arrow_downward

Това е грандиозен отговор.
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