一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情

Search组件中的商品分类与过渡动画

三级联动组件的选择性展示

首先提出一个需求，就是当页面是首页时，三级联动组件一直展示，当页面为非首页时（以search页面为例）三级联动组件只有鼠标放上去才展示，鼠标离开就消失。具体效果图如下所示。

在这里插入图片描述

在这里插入图片描述

首先分析，根据页面的不同三级联动组件的展示也不同，因此可以通过v-show来进行页面展示效果的控制。首先定义一个控制页面的数据show先默认它为true。如下所示在这里插入图片描述

当三级联动组件挂载完成是，查询一下当前所在页面，如果所在页面为/home则展示页面，否则不展示。

在这里插入图片描述此时完成了当页面为home时，三级联动组件展示，当页面为search时，三级联动组件隐藏的功能。接下来完成鼠标控制search页面中的三级联动组件展示效果的功能。首先给三级联动所在的标签绑定事件（鼠标进入事件与鼠标离开事件）如下所示

在这里插入图片描述绑定完成后，书写绑定方法，具体代码如下所示。此时该效果完成。

在这里插入图片描述

首先过渡动画的前提条件是（组件或者元素务必有v-if或者v-show指令）。只有满足该条件才可以设置过渡动画

首先将实现过渡效果的地方包裹在transition标签内，如果transition没有设置name，就可以通过v-enter等设置动画效果，如果transition设置了name（假如设置name='sort'）那么就通过 sort-enter等设置动画效果不用name的写法如下所示

在这里插入图片描述

使用name的写法

在这里插入图片描述