Vue组件及动画

组件

html中标签放组件模板，在定义组件时，template的属性值为标签的id。

html中标签是来放组件渲染结果的，通过is属性来绑定组件。

在Vue里推荐使用ref的方式来获取dom或者组件

这样就可以使用this.$refs.a取到那个tag

在有些特定的html标签里面。规定了只能放哪些标签，这是候又想用组件的时候，直接是不能用的。需要在规定的标签通过is属性来绑定组件。

例如：

过渡

单元素/组件的过度

Vue提供了组件，组件有个name属性，为了区分个体。

列表过度

当内容为多个元素/列表时，运用组件

当定义了/组件时，css中需要对其设置。

/* xxx为name值 enter为进入 leave为离开*/
/* 进入时 */
.xxx-enter{
    /* 进入过渡的初始设置 */
    opacity: 0;
}
.xxx-enter-to{
    /* 进入过渡的结束设置 */
    opacity: 1;
}
.xxx-enter-active{
    /* 进入过渡生效时的状态 */
    transition: opacity 2s;
}
/* 离开与进入类似 */

还可以通过给/组件加以下属性来实现，属性值为css类名。

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)