2 different ways to simulate the effect of slideToggle of jQuery using Vue.js. This widely used effect to show and hide the elements with a flexible transition can be achieved in several ways with Vue. Here are 2 examples:
                        
                            
                                

A) The first is the simplest one using css classes for transitions: We just declare a "toggle" object and create the 2 css classes that it creates based on the name we put on the transition component.
                        
                            
                        
                    

B) The second way using the library GSAP for transitions. The transition is much more fluid as we can see in the example. In this we need to create 2-3 methods to use gsap when expanding / contracting:
                        
                            
                        
                    

For more information about transitions with Vue: https://vuejs.org/v2/guide/transitions.html
                        
                            
                        
                    

If you want you can see another post in which I made the effect with vanillaJS: https://www.bufa.es/vanilla-js-slidetoggle/

READ MORE – CLICK HERE

www.Red360.com.ve

from Red360.com.ve https://ift.tt/35R5jbg
via Red360.com.ve