已更新

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);

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何使translate转换从元素开始？

2 个答案:

已更新