Переход Vuejs произойдет только при открытии слайда

Question

Я пытаюсь сделать переход при нажатии кнопки переключения. Мне удалось заставить переход работать на слайдер, но текст внутри класса div.hello не был анимирован при открытии слайда.

<transition name="slide">
    <aside v-if="sidebarOpen" :class="{ 'open' : sidebarOpen }">
      <a href="#">Haha</a>
      <a href="#">Nice</a>
      <a href="#">Menu</a>
    </aside>

</transition>
<div class="hello" :class="{ 'open' : sidebarOpen }">
   <p>This is a paragraph.</p>
   <p>This is a paragraph.</p>
   <p>This is a red.</p>
</div> 

Но если мы поместим .hello внутри тега перехода, переход произойдет, но при открытии слайда весь текст p попадет в слайдер, и текст не будет виден.

Я также попытался создать еще один тег transition для div.hello, например <transition name="cslide"><div class="hello">.., но он не работает.

Я хочу, чтобы все теги p перемещались вправо при открытии слайда и снова перемещались влево при закрытии слайда с помощью переходов css.

Codepen

Answer 1

Текст не анимируется, потому что вы не установили никакого свойства перехода, вам просто нужно добавить это:

.hello {
  position: absolute;
  left: 0;
  color: white;
  transition: all .3s ease;
}
.hello.open {
  left: 300px;
}

Проверьте это кодовый код