2

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

4 回答 4

0

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

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

我认为您可能正在寻找的是“关键帧”，它在该页面上对其进行了解释，无论如何您似乎都在寻找什么，也许您可​​以进一步澄清您的问题？

于 2012-04-15T12:59:54.277 回答
0

我认为这应该做

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});
于 2012-04-15T13:04:12.313 回答
0

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

// 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
于 2012-12-01T20:54:49.130 回答
0

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

$(document).ready(function(){

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

});
于 2015-09-25T03:44:53.030 回答