Question

我正在尝试使用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>

Answer 1

如何在此页面上使用CSS3动画有一个很好的解释

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

我认为你可能正在寻找的是“关键帧”并且它在那个页面上解释了它们，无论如何你似乎正在寻找，或许你可以更多地澄清你的问题？

Answer 2

我认为应该这样做

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});

Answer 3

动画在应用程序堆栈的末尾执行。所以如果你写了：

// 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

Answer 4

几毫秒的简单Javascript超时将允许浏览器重新定位元素，然后应用转换。

$(document).ready(function(){

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

});

然后CSS3移动动画

4 个答案: