我们可以动态的在组件的元素上面添加类，在组件的样式里可以设计一下这个类的样式，给它添加点过渡或者动画的样式。这样在元素上添加或者移除这个类的时候就会应用一个过渡或者动画效果了。

比如我希望在点击这个按钮的时候把这颗树隐藏起来，隐藏的时候用一种过渡效果。回到项目，打开 App 这个组件，可以先在组件里添加一个数据，名字是 isActive，默认让它等于 true。

然后找到组件模板里的这颗树，绑定元素的类，在 class 的前面加上冒号，绑定的值可以是一个数组，然后先把 emoji 这个类加上，后面是一个对象，hidden，!isActive，这样如果组件里的 isActive 的值是 false 的话，就会在这个元素上绑定一个叫 hidden 的类。

再打开下面这个按钮，在元素上绑定一个 click 事件，发生点击事件，设置一下组件里的 isActive 的值，让它等于跟之前相反的值。

打开组件用的 app.css 样式表。 在 .emoji 元素上，添加一个 transition 属性，值可以设置成 0.5s，这里就是把过渡效果用的时长设置成了 0.5s。

下面再设计一下 .hidden 这个类的样式，组件里的 isActive 这个数据的值是 false ，就会在 .emoji 这个元素上添加一个 hidden 类。 这里我们可以把 opacity 设置成 0。

正常状态下元素的 opacity 属性的值是 1，也就是完全不透明，如果在元素上加了这个 hidden 类，元素的 opactiy 就会变成 0，也就是完全透明。

因为元素上用 transition 设置了一下元素的过渡，元素的 opacity 的值从 1 变成 0，这个过程会使用一种过渡效果。

点一下这个按钮，包装这颗树的元素上面就会加上一个 hidden 类，这个类会把元素的 opacity 的值设置成 0。 再点一下按钮，会把组件里的 isActive 的值设置成 true，这样也就会去掉元素上的 hidden 这个类。元素的 opacity 属性的值又会变成 1。

这里我们再把 hidden 添加一个 transform，然后用 translateX，让元素向右移动 30 像素。

回到浏览器，再预览一下，按一下按钮，组件里的这颗树会向右移动 30 像素，逐渐消失，再点一下这个按钮，这颗树又会回到之前的位置上。