如何使翻译变换从元素开始？

Question

我在CSS 中实现了一个简单的动画一举。此动画在按钮单击时触发。我对结果很满意，但我可以做得更好。我希望突然出现的文本从按钮元素本身开始，而不是一直从页面边缘开始。我尝试更改翻译属性，但没有任何运气。我想知道是否有人可以就如何修复它给我一些建议，如果可以优化代码以使用SASS/SCSS，那就太好了。

编辑：用 SCSS 更新代码：

这是动画的代码：

HTML：

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

<button class="toggle">Toggle</button>

CSS：

 swoop-in {
   position: absolute;
   right: 0px;
   top: 140px;
   width: 220px;
   margin-left: -30px;
   &.show .swoop-in-content {
      transform: translateX(0);
      opacity: 1;
      -webkit-transform: translateX(0);
   }
   .swoop-in-content {
      transform: translateX(100%);
      -webkit-transform: translateX(100%);
      opacity: 0;
      transition: all .5s ease;
   }
}

.toggle {
  position: absolute;
  top: 120px;
  right: 20px;
  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');
});

这是CODEPEN。 使用 SCSS 更新了 CODEPEN。

谢谢。

Answer 1

假设这不是最好的解决方案，但您可以使用它来制作更精美的内容（取决于您将在该动画 div 中拥有的内容）。 https://codepen.io/Yulia_pi/pen/oddpZY 我没有转换位置属性，而是将初始 width: 0px; 更改为所需的属性，并将其定位在按钮的左边缘。为了能够做到这一点，我们还需要设置按钮大小。 overflow: hidden 让过渡 div 中的文字看起来不那么奇怪，但仍然不完美。

Answer 2

也许这个匹配你的需要https://codepen.io/AElkhodary/pen/MGGBvV如果你想改变效果，你可以调整 translate 属性的百分比

更新

Safari 遇到transition: all 的问题，我们总是应该指定我们想要转换的内容，因此解决方案是

  transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

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

body {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

.swoop-in {
  transform: translateX(45%);
  opacity: 0;
  position: absolute;
  right: 120px;
  top: 22px;
  overflow: hidden;
    transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}
.swoop-in.show {
  transform: translateX(0);
  opacity: 1;
}

.btn {
  text-align: right;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swoop-in">
  PRETTY NEAT TRANSITION BLAH BLAH..
</div>

<div class="btn">
  <button class="toggle">Toggle</button>
</div>