Question

从this fiddle开始，我们看到了一个基本动画，该动画显示了盒子从其开始位置飞到其结束位置。这是已知的良好代码。（我尝试将其作为stackoverflow片段，但由于某些原因，它在这里不起作用。）

HTML

<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>

CSS

#start{
  position:absolute;
  background:red;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  left:0px;
}
#finish{
  position:absolute;
  background:blue;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  left:200px;
}
#fly{
  position:absolute;
  background:yellow;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  left:0px;
  transition:1000ms;
}
#fly.finish{
  left:200px
  }

JavaScript

document.getElementById("fly").className = "finish";

-

与this fiddle below上方的小提琴不同，它不起作用。它不是从起点到终点轻轻过渡，而是从终点开始。这是因为它应该从“左”属性过渡到“右”属性。

HTML

<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>

CSS

#start{
  position:absolute;
  background:red;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  left:0px;
}
#finish{
  position:absolute;
  background:blue;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  right:0px;
}
#fly{
  position:absolute;
  background:yellow;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  left:0px;
  right:auto;
  transition:1000ms;
}
#fly.finish{
  right:0px;
  left:auto;
  }

JavaScript

document.getElementById("fly").className = "finish";

尽管我知道为什么这行不通，但我需要一个盒子从屏幕的左侧边缘飞到屏幕的右侧。对于此问题，大多数解决方案要么在超宽屏幕设备上看起来很奇怪，要么在狭窄的移动设备上响应时间很慢。我希望动画能够响应浏览器的宽度，在狭窄的屏幕上移动速度更快，而在宽屏幕上的移动速度更快。

最完美的解决方案是什么？

理想情况下，我不想使用任何外部库，但如果必须的话，该页面已经在使用jquery，因此如果有帮助，那将是理想的选择。

我不反对编写冗长的JavaScript函数，但较短的总是更好。

Answer 1

如您所知，动画无法正常工作是因为无法为两个不同的属性设置动画，在这种情况下，请更改左和右值，以希望对元素进行动画处理。

我的建议是：

#fly.finish {
  left:calc(100% - 100px);
}

这是假设框的宽度始终为100px。希望对您有帮助！

Answer 2

如下所示将飞行元素的“左”属性更改为（100％-元素宽度）。

#fly.finish{
  left: calc(100% - 100px);
}

获取从屏幕左侧到右侧飞行的对象

2 个答案: