support for <transition-group> (possibly through the React package: npmjs.com/package/transition-group)

[faceyspacey]

They aren't working for me.

Here's an example I copied from the Vue docs:

<template>
  <div class='container'>
    <button v-on:click='add'>Add</button>
    <button v-on:click='remove'>Remove</button>

    <transition-group name='list' tag='p'>
      <span v-for='item in items' v-bind:key='item' class='list-item'>
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
      }
    },
    methods: {
      randomIndex: function () {
        return Math.floor(Math.random() * this.items.length)
      },
      add: function () {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      remove: function () {
        this.items.splice(this.randomIndex(), 1)
      },
    }
  }
</script>

<style lang='stylus'>
.container
  background rgb(255, 190, 0)
  position absolute
  top 0px
  left 0px 
  width 100vw
  height 100vh
  display flex
  align-items center
  justify-content center
  & span
    color rgba(255,255,255, .5)
    font-size 32px

.list-item
  display inline-block
  margin-right 10px

.list-enter-active, .list-leave-active
  transition all 1s

.list-enter, .list-leave-to
  opacity 0
  transform translateY(30px)
</style>

[faceyspacey]

the transition-group's tag='p' also did not work. It used the default span. It seems perhaps this stuff isn't built? Or is incomplete?

Honestly, I wouldn't expect it to be complete, except you listed it as complete here: https://github.com/SmallComfort/react-vue/blob/dev/packages/react-vue/COMPONENT.md

Do I have to import/include something else to make this work?

[faceyspacey]

a plain <transition> like this worked though:

<template>
  <div class='container'>
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
      }
    }
  }
</script>

<style lang='stylus'>
.fade-enter-active, .fade-leave-active
  transition opacity .5s

.fade-enter, .fade-leave-to
  opacity 0
</style>

so it appears it's just transition-group that's not working.

[faceyspacey]

enter/leave/etc callbacks aren't receiving theelement or done callback` though:

<transition
      v-bind:css='false'
      v-on:before-enter='beforeEnter'
      v-on:enter='enter'
      v-on:leave='leave'
    >
      <p v-if='show'>hello</p>
    </transition>

    <button
      v-if='stop'
      v-on:click='start'
    >Start animating</button>
    
    <button
      v-else
      v-on:click='stop'
    >Stop it!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      fadeInDuration: 1000,
      fadeOutDuration: 1000,
      maxFadeDuration: 1500,
      stop: true
    }
  },

  methods: {
    enter(element, done) {
      console.log('ENTER', element, done) // both are undefined
   }
}

[SmallComfort]

Hello!

<transition-group> temporarily not supported. Before that I have tried to implement the component, it's very difficult to achieve under the react. In the document, I figured out the unsupported buildin component

<transition>

enter/leave/etc callbacks aren't receiving the element or done callback

This is a Bug, and I have just fixed it in new version, you can update your package.json to the latest version. The update list is as follows

react-vue-helper: 0.0.5
react-vue-loader: 0.0.6

Thank you very much for your issues.

[faceyspacey]

Wow that's awesome. Thanks so much.

I've been putting together a sort of presentation that shows its capabilities. So I've been trying to find its limitations. So far, very very VERY good!

By the way something very funny and coincidental is I made a React transition group library that may be exactly what you need:

https://www.npmjs.com/package/transition-group

It solves a lot of the problems of the original React transition group. Specifically it lets you do what CSS transition group does plus use callbacks. It also lets you specify callbacks (plus delays, durations etc) per transition child as well as globally per the group. And lastly it works very well to transition from a single component to another single component, not just lists of components.

Anyway check it out, it may have just the ingredients you were looking for in React.