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

Activity

1. faceyspacey commented on Aug 26, 2017

   

   faceyspacey

   on Aug 26, 2017

   Last edited by faceyspacey

   Author

   More actions

   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?
2. faceyspacey commented on Aug 26, 2017

   

   faceyspacey

   on Aug 26, 2017

   Last edited by faceyspacey

   Author

   More actions

   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.
3. faceyspacey commented on Aug 26, 2017

   

   faceyspacey

   on Aug 26, 2017

   Last edited by faceyspacey

   Author

   More actions

   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
      }
   }
4. SmallComfort commented on Aug 27, 2017

   

   SmallComfort

   on Aug 27, 2017

   Owner

   More actions

   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.
5. faceyspacey commented on Aug 27, 2017

   

   faceyspacey

   on Aug 27, 2017

   Author

   More actions

   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.
6. faceyspacey

   changed the title [-]is there a trick to getting transitions to work?[/-] [+]support for <transition-group> (possibly through the React package: npmjs.com/package/transition-group)[/+] on Aug 28, 2017