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

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 был до реальной ширины элемента