How do you apply Vue Transitions when Changing CSS Class?

Question

I can't get Vue to apply Transition animation effects when changing from one CSS class to another (using V-bind).

I've gone through the Vue documentation but none of the examples work for my use case. I basically want the DIV to transition by fading nicely from full screen to "regular size" by toggling.

Please see Fiddle at https://jsfiddle.net/luckman8/892ktedz/

`

<div v-bind:class="{'fullscreen':isFullScreen, 'regularSize':!isFullScreen}">

    <button type="button" @click="toggle">
        Toggle
    </button>

    <p>
        {{isFullScreen}}
    </p>

</div>

`

The CSS:

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s ease-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0.1;
}



.regularSize
{
    width: "50%";
    height: "50%";
    background-color: "green";
}

.fullscreen
{
  display: flex;
  flex-direction: column;

  position: fixed;
  background-color:blue;

  top:0;
  left:0;
  width: 100%;
  height: 100%;

  flex-basis:10%;
  overflow-y:hidden;

}

The Vue code:

new Vue({
  el: "#app",
  data: {
   isFullScreen:false

  },

  methods: {

    toggle()
    {
        this.isFullScreen = !this.isFullScreen
    }



  }

})

Thank you in advance!

Vues <transition> element is only useful if you want to toggle the visibility of components (enter/leave transitions). If you just want to shrink/expand you have to create your own transition with CSS or JavaScript, as you rightly mentioned. To help you with your problem please edit your post to also include the CSS you use! — MarcRo
– MarcRo, Commented Sep 28, 2019 at 17:54
@MarcRo - thank you for your quick response. Will edit post above to include the CSS. There is also a JSFiddle link to the full test code. — luckman777
– luckman777, Commented Sep 28, 2019 at 19:47
It appears you need to do a little bit of reading on how css-transitions work. MDN - developer.mozilla.org/en-US/docs/Web/CSS/transition has a good documentation here. Maybe play around with css transitions a bit and ask another question if you have a specific problem - not an 'how does x work' type of question. — MarcRo
– MarcRo, Commented Sep 29, 2019 at 9:18

T. Short · Accepted Answer · 2019-09-29 08:51:21Z

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

So you have two options.

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>

Create the transition effect purely with css.

Collectives™ on Stack Overflow

How do you apply Vue Transitions when Changing CSS Class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related