babel-plugin-transform-vue-jsx
babel-plugin-transform-vue-jsx copied to clipboard
transitions does not work on slot children change
Example setup
<Gallery>
<GalleryItem src="https://placekitten.com/g/600/900">foo</GalleryItem>
<GalleryItem src="https://placekitten.com/g/500/900">bar</GalleryItem>
</Gallery>
import {Component, Prop, Vue} from 'vue-property-decorator'
@Component()
export default class Gallery extends Vue {
showItem = 0;
itemsCount = 0;
get show() {
return this.showItem;
}
set show(value) {
this.showItem = value >= this.itemsCount ? 0 : (value < 0 ? this.itemsCount - 1 : value);
}
mounted() {
this.itemsCount = this.$slots.default.length;
setInterval(()=> this.show++, 1000); // for test
}
render(h) {
return <div class="gallery">
<div class="gallery-wrap">
<transition name="fade">
{this.$slots.default[this.show]}
</transition>
</div>
</div>
}
}
import {Component, Prop, Vue} from 'vue-property-decorator'
@Component()
export default class GalleryItem extends Vue {
@Prop()
src: string;
render(h) {
return <div class="gallery-item" style={{backgroundImage: `url(${this.src})`}}>
{this.$slots.default}
</div>
}
}
Transition will not apply. The same if I move <transition> into GalleryItem
Can you please create a reproduction repository and link it here?