Pacote de animação no Vue

1. Use componentes para encapsular a animação,

2. Use ganchos de animação para definir o estilo

3. Defina um slot no componente para facilitar a identificação personalizada do elemento pai

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

< cabeça > 
    < meta charset = "UTF-8" > 
    < nome da meta = "viewport" content = "width = largura do dispositivo, escala inicial = 1.0" > < title > Documento </ title > < script src = "./ js / vue.js" > </ script > < script src = "./ js / velocity.min.js" > <
    
    
    


< corpo > 
    < div class = "app" > 
        < filho : show = 'show' > 
            < h3 >封装</ h3 > 
        </ filho > 
        < / filho > < filho : show = 'show' > 
            < h5 >方式 组件 的 方式< / h5 > 
        </ child > 
        < button @click = 'btnClick' > alterna </ button > 
    </ div >
    < script >
        // Empacota a animação como um componente 
        Vue.component ( ' child ' , { 
            props: [ " show " ]],
             // o estilo é exibido na forma de 
            modelo de gancho de animação : ` < transição 
                @before - enter = ' beforeEnter '  
                @enter = ' enter '  
                @before - deixe = ' beforeLeave '  
                @leave = ' deixe ' > 
                //Slot 
                < slot v - se = ' show ' > < / slot> 
            < / transição> `, 
            métodos: {
                 // 进入 时
                beforeEnter: function (el) { 
                    el.style.opacidade =  0 ; 
                }, 
                insira: function (el, done) { 
                    Velocidade (el, { 
                        opacidade: 1 
                    }, { 
                        duration: 1000,
                         // completa: feito 
                    }); 
                }, 
                // 时 时
                beforeLeave: function (el) { 
                    el.style.opacidade =  1 ; 
                }, 
                deixe: function (el, concluído) { 
                    Velocidade (el, { 
                        opacidade: 0 
                    }, { 
                        duração: 1000 , 
                        completa: concluída 
                    }); 
                }
                afterLeave: function (el) { 
                    el.style.display =  ' nenhum ' ; 
                } 
            } 
        }); 
        // 化 化 Vue 
        var vm =  new Vue ({ 
            el: ' .app ' , 
            dados: { 
                show: true 
            }, 
            métodos: { 
                btnClick: function () {
                     this .show =  ! This .show;
                } 
            } 
        }); 
    </script > 
</ body > 

</ html >