Как сделать так, чтобы преобразование трансляций начиналось с элемента?

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 для него. Обновлено CODEPEN с SCSS.

Спасибо.

Answer 1

Может быть, это соответствует вашим потребностям 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>

Answer 2

Предположим, что это не лучшее решение, но вы можете поиграть с ним, чтобы сделать его более привлекательным (в зависимости от содержания, которое вы будете иметь в этом анимированном элементе div).https://codepen.io/Yulia_pi/pen/oddpZY Вместо перехода свойства положения я изменил начальное значение width: 0px; на желаемое и расположил его у левого края кнопки.Чтобы сделать это, нам также нужно установить размер кнопки.overflow: hidden заставляет текст в переходном div выглядеть не так странно, но все же не идеально.