Vuejs：淡入淡出过渡不起作用

Question

我已经为要放置在网站中的过渡功能实现了此代码，但由于某种原因它不起作用。单击按钮时，过渡应该起作用。

我添加了我主要使用的 HTML、Javascript 和 CSS 代码，它们链接到我需要的过渡功能。

我希望有人可以帮助我。提前谢谢了！

HTML：

<transition name="fade" mode="out-in">
                        <div class="plain-slider w-slider">
                            <div class="mask w-slider-mask">
                                <div class="slide-padding w-slide">
                                    <div class="testimonial">
                                        <div class="testimonial-name>
                                            <p class="s"></p>
                                            <div class="testimonial-text">
                                                {{testimonialData[number].comments}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-row">
                                        <div class="column w-col w-col-3">
                                            <div class="testimonial-image">
                                                <img class="displayPic" alt="Display Picture" v-bind:src="testimonialData[number].userPic" />
                                            </div>
                                        </div>
                                        <div class="testimonial-name w-col">
                                            <div class="blue bold">
                                                {{testimonialData[number].name}}
                                            </div>
                                            <div class="ratingStars">
                                                <img class="rate" src="~/assets/Images/All/svgs/svg/star.svg" alt="Review Star Icon" v-for="n in testimonialData[number].stars"
                                                    :key="n" />
                                            </div>
        
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
    <button class="next" @click="increment"> > </button>

Javascript：

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

CSS：

<script>
export default{
  data(){
    view: 'v-a'
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'The easiest ticket site.',
        stars: 5
      },
      {
        name: 'G',
        comments: 'Its so easy to use.',
        stars: 4
      }
    ],
    number: 0
  }
  },
  methods:{
    increment: function(){
      this.number = this.number === this.testimonialData.length - 1 ? 0 : this.number + 1
    }
  },
}
</script>

Answer 1

您似乎误解了进入/离开和列表转换的工作原理。

正如导游所说：

Vue 提供了一个转换包装组件，允许您在以下上下文中为任何元素或组件添加进入/离开转换：

1. 条件渲染（使用 v-if）
2. 条件显示（使用v-show）
3. 动态组件
4. 组件根节点

你的代码只是改变了部分节点的内容，不符合以上四种情况中的任何一种。

您可以添加v-if到<div class="plain-slider w-slider" v-if="show">，然后您将看到过渡效果。

Vue.config.productionTip = false
app = new Vue({ //not vue, it is Vue
  el: "#app",
  data(){
    view: 'v-a'
    return{
    testimonialData: [
      {
        name: 'W',
        comments: 'The easiest ticket site.',
        stars: 5
      },
      {
        name: 'G',
        comments: 'Its so easy to use.',
        stars: 4
      }
    ],
    number: 0,
    show: true
  }
  },
  methods:{
    increment: function(){
      this.number = this.number === this.testimonialData.length - 1 ? 0 : this.number + 1
      this.show = !this.show
    }
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity 1.3s ease;
}
.fade-enter, .fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<transition name="fade" mode="out-in">
                        <div class="plain-slider w-slider" v-if="show">
                            <div class="mask w-slider-mask">
                                <div class="slide-padding w-slide">
                                    <div class="testimonial">
                                        <div class="testimonial-name">
                                            <p class="s"></p>
                                            <div class="testimonial-text">
                                                {{testimonialData[number].comments}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="testimonial-row">
                                        <div class="column w-col w-col-3">
                                            <div class="testimonial-image">
                                                <img class="displayPic" alt="Display Picture" v-bind:src="testimonialData[number].userPic" />
                                            </div>
                                        </div>
                                        <div class="testimonial-name w-col">
                                            <div class="blue bold">
                                                {{testimonialData[number].name}}
                                            </div>
                                            <div class="ratingStars">
                                                <img class="rate" src="~/assets/Images/All/svgs/svg/star.svg" alt="Review Star Icon" v-for="n in testimonialData[number].stars"
                                                    :key="n" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
    <button class="next" @click="increment()"> > </button>
</div>