1

I'm trying to do the move transition when the toggle button was clicked. I managed to get the transition to work for the slider but the text inside the class div.hello not getting animated on slide 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> 

But if we put the .hello inside the transition tag, transition occurs but on the slide open all the p text gets into the slider and no text getting visibled.

I also tried creating another transition tag for div.hello like <transition name="cslide"><div class="hello">.. but it fails to work.

What I want is, all the p tags gets moved to the right on slide open and again moved to the left on slide close with css transitions.

Codepen

1
  • There's no need to add the open class to the element. <transition> combined with v-if and some transition CSS classes will do all the work. Have you read the docs? There's an example in there which does what you want. May 14, 2018 at 8:29

1 Answer 1

1

The text is not getting animated because you haven't set any transition property, you just need to add this:

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

Check this codepen

2
  • but unfortuanetly it fails to work on my real code. codepen.io/avinash3105/pen/YLjGKP here I removed the transition property from hello class and aside class but transition here works, its because vue's transition directive. Is there anyway to give different slide transitions values based on the tag names? May 14, 2018 at 14:52
  • @AvinashRaj You can't do it like this, Vue's <transition> component is meant to be used with content that gets shown/hidden conditionally (like your aside since it has v-if), but it doesn't work with your paragraph content because they need to be shown always. The previous approach is more appropriate, wrap your aside only within a transition component and use CSS transition property for your p tags. If you can tell me what behavior you want exactly maybe I can help you more.
    – Amr Noman
    May 14, 2018 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.