javascript - 更改显示中居中按钮的动画方向(持续时间)

Question

我有一个包含一些段落的 div，我想通过 .show() 按需显示这些段落。在那个 div 中，还有另一个 div，包含一个按钮。该 div 将文本对齐设置为居中，因此我的按钮位于段落中所有文本的中间。

当使用 show(1000) 时，文本从上到下进行动画处理，这正是我想要的。但是，该按钮并没有遵循该行为，而是从左侧滑入。

$('.showme').show(1000);

    .wrapper {
        text-align: center;
    }
    
    .button {
        position: absolute;
    }
    
    .showme {
      display: none;
      width: 400px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showme">
    <p>
        Text
    </p>
    <p>
        More Text
    </p>
    <div class="wrapper">
        <button class="button">Hello</button>
    </div>
</div>

您可以在这个 JSFiddle 中看到行为

我希望按钮立即位于中间并与段落一起向下滑动。如何实现这一目标？

编辑:...同时保持当前的 Div-wrapper 文本对齐逻辑。我只想改变它的动画方式，而不是按钮的定位方式。我需要在我的元素中这样做。

Answer 1

如果你想立即将按钮设置到中间，你应该定位那个按钮。 JSFiddle

.wrapper {
  text-align: center;
  position: relative;
}
.button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

编辑:

如果你想保持 div.wrapper 样式不变，但你可以从按钮中删除 position: absolute; 你可以尝试使用 $('.showme').slideDown( 1000); - JSFiddle

如果你想保持 div.wrapper 样式不变并创建你自己的动画，你应该 .addClass("nameClass") 使用你自己的样式而不是使用 .show( )