如何让CSS划入动画从按钮元素起始？附SCSS优化需求

嗨，我明白你想要的效果——让划入的文本从按钮本身的位置开始滑动，而不是从页面边缘进来，同时把代码切换到SCSS。咱们一步步来解决这个问题：

关键问题分析 #

原来的动画里，.swoop-in-content初始是transform: translateX(100%)，这会让它从.swoop-in容器的右侧（也就是页面边缘）滑入。要让它从按钮位置开始，我们需要调整初始的位置偏移，让文本一开始就对齐按钮，然后滑动到目标位置。同时我们可以优化布局，让容器和按钮的位置关联更紧密。

修改后的完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button class="toggle">Toggle</button>
  <div class="swoop-in">
    <div class="swoop-in-content">
      PRETTY NEAT TRANSITION BLAH BLAH..
    </div>
  </div>
</div>

SCSS

.container {
  position: relative;
  top: 120px;
  right: 20px;
  text-align: right; /* 让按钮和容器靠右对齐 */
}

.swoop-in {
  position: absolute;
  right: 0;
  top: calc(100% + 10px); /* 让容器在按钮下方，间距10px */
  width: 220px;
  margin-left: -30px;
  
  &.show .swoop-in-content {
    transform: translateX(0);
    opacity: 1;
  }
  
  .swoop-in-content {
    transform: translateX(calc(100% + 20px)); /* 初始位置对齐按钮右侧 */
    opacity: 0;
    transition: all .5s ease;
    background: #fff; /* 加背景方便观察效果 */
    padding: 1em;
  }
}

.toggle {
  background: none;
  border: 2px solid;
  border-bottom-width: 4px;
  margin: 1em;
  padding: 1em 2em;
  height: auto;
  text-align: center;
  text-transform: uppercase;
  background-color: red;
  
  &:hover {
    background-color: #9c89f7;
    cursor: pointer;
  }
}

jQuery

$('.toggle').click(function() {
  $('.swoop-in').toggleClass('show');
});

核心修改说明 #

• 布局关联优化：新增.container父元素，把按钮和动画容器放在一起，用相对定位让它们的位置绑定更清晰，避免硬编码坐标导致的错位。
• 动画起点修正：将.swoop-in-content的初始偏移从translateX(100%)改为translateX(calc(100% + 20px))，其中20px对应按钮的右侧margin，确保文本初始位置刚好对齐按钮边缘，滑动时直接进入目标容器。
• 容器位置调整：用top: calc(100% + 10px)让动画容器固定在按钮下方，让滑动路径更自然，视觉逻辑更顺畅。

这样调整后，点击按钮时，文本就会从按钮的位置平滑滑入到目标容器里，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者ShellZero