Javascript 和 CSS 动画没有将我的结果放在正确的位置

Question

我有 Javascript 和 CSS 动画，我试图展示一种效果，即名称以垂直方式从袋子中出来，然后名称翻转为水平方式并放置在我的 .shuffled_results 分区。当我尝试在我的页面上执行此操作时，名称会绕圈飞来飞去并放置在正确的位置，但我不希望名称在屏幕上绕圈飞来飞去。它看起来像一只飞来飞去的鸟。

我创建了一个 fiddle ，但结果与我页面中发生的情况不同。我确定这与我的 div 位于页面下方而不是顶部 Angular 落有关。

https://jsfiddle.net/n2o672q3/

我已经尝试了很多这样的方法来让它工作，但我所做的一切似乎都不起作用。

这段代码我搞砸了很多..

.shuffle_results {
  position: relative;
    z-index: -1;
    font-size: 2em;
    -webkit-animation:spin 3s linear;
    -moz-animation:spin 3s linear;
    animation:spin 3s linear;
}

有没有人知道如何让它正常工作？

Answer 1

尝试这样做，首先将您所有的子内容放在另一个 div 中，我们将在该 div 上应用 overflow 属性

<div class="main-bag"> <!--Making all content wrap inside main div-->
    <div class="shuffle_results" id="results">Bob</div>
    <div class="shuffle_results" id="results">George</div>  
    <div class="shuffle_results" id="results">Mary</div>
    <div class="shuffle_results" id="results">Lucy</div>
    <img id='paperBag' src="http://www.thecuriouscaterpillar.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/a/bag_to_white.jpg" width="200px" />
</div>

然后在CSS中

.main-bag{
    overflow:hidden;
}

这将确保位于主 div 边界之外的任何子内容都被剪掉