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 >