[Vuejs]-How do you apply Vue Transitions when Changing CSS Class?

by

1👍

✅

The <transition> effects will only work for elements that change their visibility. So for example by using v-if.

So you have two options.

  1. Either add a v-if logic to your template.

For example: (a quick mock up. could be refactored to be cleaner)

 <div id="app">
   <button type="button" @click="toggle">
            Toggle
        </button>
   <transition name="fade">
     <div 
      v-if="isFullScreen" 
      v-bind:class="{
        'fullscreen':isFullScreen, 
        'regularSize':!isFullScreen
     }">    
          <p>FULL SCREEN</p>
      <button type="button" @click="toggle">
              Toggle
        </button>
      </div>
  </transition>
  <transition name="fade">
    <div 
     v-if="!isFullScreen" 
     v-bind:class="{
       'fullscreen':isFullScreen, 
       'regularSize':!isFullScreen
      }">
      <p>SMALL SCREEN</p>
    </div> 
    </transition>
</div>
  1. Create the transition effect purely with css.
👤T. Short

Leave a comment