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

您似乎误解了Enter/Leave& List Transition的工作方式。

<强> As the guide said

  

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

     

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

您的代码只会更改某些节点的内容，不能满足上述四种情况中的任何一种。

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;