Можно ли использовать transform: scaleX () без влияния на радиус границы? - PullRequest
Новая
       50

Можно ли использовать transform: scaleX () без влияния на радиус границы?

3 голосов
/ 16 января 2020

Я пытаюсь создать простую анимацию расширяющейся панели. Все работает, найди, и я управляю им по своему вкусу, за исключением изменения border-radius, на которое влияет преобразование scaleX(). Есть ли способ избежать этого эффекта?

Я предполагал, что использования абсолютной единицы для border-radius будет достаточно, но этого не происходит. scaleX() все еще влияет на него.

Важное примечание:

Я хочу использовать scaleX() вместо того, чтобы работать со свойством width, потому что элементы, с которыми я работаю Он может быть разной ширины, и я хочу иметь только одну анимацию для работы со всеми. 

div {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    transform: scaleX(0.1);
  }
  to {
    transform: scaleX(1);
  }
}
<div />

1 Ответ

2 голосов
/ 16 января 2020

Я хочу использовать scaleX () вместо работы со свойством width, потому что элементы, над которыми я работаю, имеют различную ширину, и я хочу иметь только одну анимацию для работы со всеми ними.

Не указывайте to, и ваша анимация будет работать с любой шириной: 

.bar {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    width:20px;
  }
}
<div class="bar"></div>

<div class="bar" style="width:100px"></div>
<div class="bar" style="width:40px"></div>
...