babel-plugin-transform-vue-jsx icon indicating copy to clipboard operation
babel-plugin-transform-vue-jsx copied to clipboard

transitions does not work on slot children change

Open terion-name opened this issue 7 years ago • 1 comments

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

terion-name avatar Apr 25 '18 18:04 terion-name

Can you please create a reproduction repository and link it here?

nickmessing avatar Jan 11 '19 20:01 nickmessing