0

由于某种原因，在我的 webpack/vue-loader 应用程序的 de html 代码中出现 -enter-active 和 -leave-active 且默认超时的情况下，不可能产生过渡效果。

在处理了一些缺少动画的问题后，我从我的 webproject 中的vue-guide复制/粘贴了以下代码。即使是下面这个简单的例子也根本不起作用。

还有其他人遇到这个问题吗？

索引.html

  <div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  </div>

我的 main.js 文件：

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

**我通过添加 css class fade-enter-active, .fade-leave-active 解决了上面的代码 **

但是，相同的原理在我在 Vue.component 中创建的图像滑块中仍然不起作用。代码看起来像这样。

var dataHome = { show: true,
                 currentNumber: 1,
                 images: ['image1.jpg',
                          'image2.jpg',
                          'image3.jpg',
                          'image4.jpg',
                          'image5.jpg']
                 }

const Home = {
  template: `<div class="box-container">
              <p><a @click="prev">Previous</a> || <a @click="next">Next</a></p>
              <transition name="fade">
                <div id="demo" v-if="show">
                  <img :src="images[Math.abs(currentNumber) % images.length]"/>
                </div>
              </transition>
            </div>`,
  data: function () {
    return dataHome  //dataset with images
  },
  methods: {
    next: function () {
      this.currentNumber += 1;
      this.show = true;
    },
    prev: function () {
      this.currentNumber -= 1;
      this.show = true;
    }
  }
 }
4

0 回答 0