1

所以这就是问题所在，我使用 CSS3 transform:translate(x, y) 将对象从屏幕左侧过渡到右侧。（x 轴）问题取决于屏幕分辨率，这些对象飞离屏幕。根据我的发现，我可以使用百分比来定义坐标，但是在使用它们时，它们的行为似乎与我使用像素测量一样。这是否可能仅使用 css3 或者我必须使用媒体查询的 Javascript 来实现？

ps，它把1400%当作1400px，我也试过用em。

$(window).load(function() {


     $('#second').css({
         webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all 1.25s ease-in-out'


     });


$('#first').css({
         webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all 1.75s ease-in-out'

     });

$('#third').css({
     webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all .75s ease-in-out'


     });
4

1 回答 1

0

您可以绝对定位它们，然后在left和上过渡margin-left。

jsFiddle

#trans {
    position:absolute;
    top:50px;
    left:0%;
    width:50px;
    height:50px;
    background-color:#00F;
    -moz-transition:all 2s ease;
    -webkit-transition:all 2s ease;
    transition:all 2s ease;
}

#trans.toggle {
    left:100%;
    margin-left:-50px;
}

您的特定解决方案不起作用，因为您只是将它们向右移动 1400%，这与14 * width.

要在页面加载时更改它，请准备好文档中的类。

jsFiddle

$(document).ready(function () {
    $('#trans').addClass('toggle');
});
于 2013-03-31T14:17:29.320 回答