更改 CSS Class 时如何应用 Vue 转换？

Question

当从一个 CSS class 更改为另一个（使用 V-bind）时，我无法让 Vue 应用过渡动画效果。

我已经阅读了 Vue 文档，但是 none 示例适用于我的用例。我基本上希望 DIV 通过切换从全屏很好地淡化到 "regular size" 来过渡。

请参阅 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;

}

Vue代码：

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

  },

  methods: {

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



  }

})

提前致谢！

Answer 1

<transition> 效果仅适用于改变可见性的元素。因此，例如使用 v-if.

所以你有两个选择。

向您的模板添加 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创建转场效果。

更改 CSS Class 时如何应用 Vue 转换？

How do you apply Vue Transitions when Changing CSS Class?

transition

vue.js