目录

简介

第一部分：子组件内容及详细注释

第二部分：最终实现效果

 第三部分：动画知识剖析

---

简介

该项目（购物车）制作主要采用了tap栏切换、删除、添加、存储、清空数据、全选or单选及其它动态效果为一体的实现购物车功能。每一个子组件内部都包含了三部分：HTML ，js，css样式。 在下面的内容中，博主会以组件实现的形式展现效果部分。每一部分都有详细的注释

第一部分：子组件内容及详细注释

子组件1：MyHeader.vue

子组件2：MyList.vue

子组件3：MyItem.vue

子组件4：MyFooter.vue

父组件1：App.vue

第二部分：最终实现效果

进入时：

 进入后：

 删除时：

 

删除后：

 选or非选：

 第三部分：动画知识剖析

四种情况：（与他们在style中的排列顺序有关系）
1、appear-class、 appear-to-class、 appear-active-class或者 appear-to-class、appear-class、 appear-active-class的排列顺序，此时只有appear-active-class的属性起作用。
2、appear-active-class、appear-class、 appear-to-class
此时appear-active-class的不起作用，由appear-class过渡到appear-to-class属性。
3、appear-class、appear-active-class、 appear-to-class
此时appear-class属性不起作用，由appear-active-class过渡到 appear-to-class属性。
4、 appear-to-class、 appear-active-class、appear-class
此时appear-to-class不起作用，由appear-class过渡到 appear-active-class属性。
enter也有相似的问题