Paquete de animación en Vue

1. Use componentes para encapsular animación,

2. Use ganchos de animación para establecer el estilo

3. Establezca una ranura en el componente para facilitar el etiquetado personalizado del elemento primario

<! DOCTYPE html > 
< html lang = "en" > 

< head > 
    < meta charset = "UTF-8" > 
    < meta name = "viewport" content = "width = device-width, initial-scale = 1.0" > 
    < title > Documento </ title > 
    < script src = "./ js / vue.js" > </ script > 
    < script src = "./ js / velocity.min.js" > <


< body > 
    < div class = "app" > 
        < child : show = 'show' > 
            < h3 >动画 封装</ h3 > 
        </ child > 
        < child : show = 'show' > 
            < h5 >采用 组件 的 方式< / h5 > 
        </ child > 
        < button @click = 'btnClick' > alternar </ button > 
    </ div >
    < guión >
        // Paquete de animación como componente 
        Vue.component ( ' child ' , { 
            props: [ " show " ],
             // el estilo se muestra en forma de 
            plantilla de 
                enlace de animación : ` < transition @before - enter = ' beforeEnter '  
                @enter = ' enter '  
                @before - leave = ' beforeLeave '  
                @leave = ' leave ' > 
                //插槽
                < slot v - if = ' show ' > < / slot> 
            < / transition> `, 
            métodos: {
                 // 进入 时
                beforeEnter: function (el) { 
                    el.style.opacity =  0 ; 
                }, 
                ingrese: función (el, hecho) { 
                    Velocidad (el, { 
                        opacidad: 1 
                    }, { 
                        duración: 1000,
                         // completo: hecho 
                    }); 
                }, 
                // 离开 时
                beforeLeave: function (el) { 
                    el.style.opacity =  1 ; 
                }, 
                dejar: función (el, hecho) { 
                    Velocidad (el, { 
                        opacidad: 0 
                    }, { 
                        duración: 1000 , 
                        completa: hecho 
                    }); 
                },
                afterLeave: función (el) { 
                    el.style.display =  ' none ' ; 
                } 
            } 
        }); 
        // 实例化Vue 
        var vm =  nueva Vue ({ 
            EL: ' .app ' , 
            de datos: { 
                espectáculo: verdadero 
            }, 
            métodos: { 
                btnClick: la función () {
                     este .show =  ! Este .show; 
                } 
            } 
        }); 
    </script > 
</ body > 

</ html >

 

Supongo que te gusta

Origin www.cnblogs.com/qtbb/p/12757596.html
Recomendado
Clasificación