Trying to implement a smooth transition when the toggle button is clicked. Successfully applied the transition effect on the slider, but struggling to animate the text inside the div.hello class upon sliding open.
<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>
The issue arises when placing the .hello element within the transition tag - all the p text disappears upon slide open and becomes visible during slide close.
Attempts were made to create another transition tag for div.hello, such as
<transition name="cslide"><div class="hello">The desired outcome is to have all the p tags move to the right upon slide open and return to their original position on slide close using CSS transitions.