在 Vue 应用里，你可以使用 v-if 指令来决定是否要在界面上显示某个元素或者组件。在这种元素或者组件的上面你不能直接使用基于 class 的过渡效果。需要借助 vue 提供的 transition 组件。

先把要在这个元素上绑定的类改成 hidden，值是 !isActive，如果组件里的 isActive 的值是 false，就会在这个元素上绑定一个 hidden 类。下面再把组件里的这个数据默认的值设置成 true。 点击 按钮，会在 emoji 元素上添加或者移除 hidden 这个类。这样会在这个元素上应用一种过渡效果。

现在我们在这个元素上加上一个 v-if 指令，值设置成 isActive，这样只有组件里的 isActive 这个数据的值是 true 的时候，才会在界面上包含这个元素。

再到浏览器上试一下，你会发现，之前的过滤效果已经不管用了。 因为如果 isActive 的值是 false，就会在界面上完全移除掉包装表情符号的这个元素。

如果你想在元素进入或者离开的时候应用一种过滤效果，可以使用 vue 提供的 transition 组件包装一下这个元素。先处理一下这个元素的类，直接使用 class 属性，不做绑定，添加一个叫 emoji 的类。

然后使用一组 transition ，用它包装一下这个表情符号元素。

再回到浏览器试一下，注意观察这个 emoji 元素上出现的类，在界面上包含或者移除这个元素的时候，在这个元素上面都会应用一些特定的 css 类，在组件的样式表里使用这些类我们可以给这个元素添加过渡效果。

回到项目，打开 app.css 这个样式表，在 App 组件里导入使用了这个样式表里的样式，所以我们可以在这里设计一下过渡的样式。

先设计一下进入状态的过渡效果，进入之前会在元素上添加一个 v-enter-from ，这个类可以看成是进入状态的起点，进入的过程都会在元素上添加 v-enter-active 这个类，进入完成的时候会在元素上添加 v-enter-to。

下面我们就用这几个类给元素添加一个进入状态的过渡，比如我们可以设计一个简单的渐变效果。v-enter-from 是进入状态的起点，也就是你可以在这里设计元素的初始状态，可以把 opacity 设置成 0 。在 v-enter-active 的上面可以设置一下过渡的时长，transition 设置成 0.3s。

然后在 v-enter-to 这里设计一下进入的结束状态的样式，把 opacity 设置成 1 。这样元素被插入到界面上的时候，它会从完全透明这种状态，过渡到完全不透明。

在浏览器上先试一下， 点一下按钮，隐藏了仙人掌，再点一下，元素又会出现在界面上，这次就会应用一种渐变的过渡效果。

元素在界面被移除的时候还没有过渡效果，下面可以继续去设计一下离开的过渡。 同样有几个类，一个是 .v-leave-from ，这个是离开的起点，还有 .v-leave-active，离开的过程都会有这个类，还有一个 .v-leave-to，离开以后会在元素上添加这个类。

在这个 v-leave-from 这里，设计一下元素离开的时候的状态，可以把 opacity 设置成 1 ，然后在 v-leave-active 这里设置一下过渡，transition 设置成 0.3s 。 最后在 v-leave-to 这里，把 opacity 设置成 0 。

这样元素在界面上被移除的时候也会使用一种过渡效果，元素会从完全不透明这种状态过渡到完全透明。

回到浏览器上再测试一下。点击按钮， 现在界面上出现还有移除这个仙人掌的时候都会使用一种过渡效果。