admin管理员组文章数量:1334188
I have implemented this code for the transition feature to be placed within the website, but it is not working for some reason. The transition should work when the button is clicked.
I have added the HTML, Javascript and CSS code that I am mainly using and they linked to the transition feature that I need.
I hope that someone can help me. Many thanks in advance!
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]ments}}
</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
/* ponent-fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
CSS:
<script>
export default{
data(){
view: 'v-a'
return{
testimonialData: [
{
name: 'W',
ments: 'The easiest ticket site.',
stars: 5
},
{
name: 'G',
ments: '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>
I have implemented this code for the transition feature to be placed within the website, but it is not working for some reason. The transition should work when the button is clicked.
I have added the HTML, Javascript and CSS code that I am mainly using and they linked to the transition feature that I need.
I hope that someone can help me. Many thanks in advance!
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].ments}}
</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
/* .ponent-fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
CSS:
<script>
export default{
data(){
view: 'v-a'
return{
testimonialData: [
{
name: 'W',
ments: 'The easiest ticket site.',
stars: 5
},
{
name: 'G',
ments: '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>
1 Answer
Reset to default 4It seems you misunderstood how Enter/Leave& List Transition works.
As the guide said:
Vue provides a transition wrapper ponent, allowing you to add entering/leaving transitions for any element or ponent in the following contexts:
- Conditional rendering (using v-if)
- Conditional display (using v-show)
- Dynamic ponents
- Component root nodes
Your codes only change the contents of some nodes, don't meet any one of above four situations.
You can add v-if to <div class="plain-slider w-slider" v-if="show">, then you will see the transition effect.
Vue.config.productionTip = false
app = new Vue({ //not vue, it is Vue
el: "#app",
data(){
view: 'v-a'
return{
testimonialData: [
{
name: 'W',
ments: 'The easiest ticket site.',
stars: 5
},
{
name: 'G',
ments: '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
/* .ponent-fade-leave-active below version 2.1.8 */ {
opacity: 0;
}<script src="https://unpkg./[email protected]/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].ments}}
</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>本文标签： javascriptVuejs fade outin transition not workingStack Overflow
版权声明：本文标题：javascript - Vuejs: fade out-in transition not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742310712a2450812.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论