Как вы применяете Vue Transitions при изменении CSS-класса?

Question

Я не могу заставить Vue применять эффекты анимации Transition при переходе с одного класса CSS на другой (используя V-bind).

Я просмотрел документацию Vue, но ни один из примеров не работает длямой вариант использования.Я в основном хочу, чтобы DIV переходил, плавно переходя от полного экрана к «обычному размеру» переключением.

Пожалуйста, см. Fiddle на https://jsfiddle.net/luckman8/892ktedz/

`

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

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

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

</div>

`

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код:

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

  },

  methods: {

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



  }

})

Заранее спасибо!

Answer 1

Эффекты <transition> будут работать только для элементов, которые изменяют свою видимость.Например, с помощью v-if.

Таким образом, у вас есть два варианта.

1. Либо добавьте логику v-if в шаблон.

Например: (быстрый макет. Может быть переработан, чтобы быть чище)

 <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>

Создайте эффект перехода исключительно с помощью css.