Сделать компонент, который появляется путем растягивания из нулевой ширины/высоты, по типу slideToggle из jquery?

Question

[Антон Антон]

api.jquery.com/slideToggle


Хочу, чтобы при отправке запроса на сервер инпут немного уменьшался и справа появлялась иконка.
пытаюсь сделать так:

.scaleX-enter-active , .scaleX-leave-active {
    transition: all .4s;
  }
  .scaleX-enter, .scaleX-leave-to
  /* .slide-fade-leave-active для <2.1.8 */ {
    transform: scaleX(0);
  }

...
        <transition name="scaleX">
          <span v-if="processing" class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"/></span>
        </transition>
...

иконка появляется и пропадает моментально. При этом с fade все прекрасно работает.
сделал небольшой пример, https://jsfiddle.net/5wcrfqdb/3/ , хочу, чтобы блок scale появлялся слева направо (от нулевой ширины до полной)

upd: немного продвинулся: https://jsfiddle.net/5wcrfqdb/60/
в идеале сделать так, чтобы scale был до реальной ширины элемента

Comments

[Ankhena]

Не вижу анимации для иконки.
Выложите пример на https://jsfiddle.net/

[Антон Антон]

Ankhena W: https://jsfiddle.net/5wcrfqdb/2/ (используются стрелочные функции, так что в ie не работает)

Answer 1

[Evgeny Kulakov]

А если div вместо span?
<div v-if="processing">scaleX</div>

Comments

[Антон Антон]

так получше, но все равно разъезжается:
https://jsfiddle.net/5wcrfqdb/56/

[Evgeny Kulakov]

А так: https://jsfiddle.net/mcw4cks0/

[Антон Антон]

Evgeny Kulakov: т.е. тупо от порядка определения классов в css зависит? никогда бы не подумал...

[Evgeny Kulakov]

Да, смысл в том, что класс, который вы задавали внизу переопределял width, который вы задавали в классах анимации