找到 App 组件里的这个表情符号，随便换一个 emoji。 这个按钮可以再处理一下，给它绑定一个 class， 一个对象，要绑定的类的名字是 active，根据 isActive 这个根据的值来绑定这个类。

然后把组件里的 isActive 默认的值设置成 false 。 打开 card 这个样式表，设置一下当按钮上包含 active 这个类的时候按钮的样式。可以把 background 设置成黑色，然后再把文字的颜色设置成白色。

这样如果组件里的 isActive 的值是 true， 按钮元素上就会加上 active 这个类，它会把按钮的背景设置成黑色，文字设置成白色。

在这个卡片组件的外面，再添加一个 div，上面加上 status ，里面用一组 small 标签包装一行文字，isActive ，后面再绑定输出 isActive 这个数据的值。

打开 card 样式表，设计一下 status 这个类的样式，让文字居中，可以把 text-align 设置成 center 。 再用 margin 添加 24 像素的边距。

定义动画

下面再打开 app.css 这个样式表，在这个样式表里我们先定义一种动画，用 @keyframes，动画的名字叫 pulse， 然后在里面设计一下这种动画。

用 from 设计一下动画开始的状态，用一个 transform ，它的值用一下 scale3d，这个 scale3d 的值设置成 1，1，1 。

然后再添加一个 50%，动画进行到一半的时候，可以再用 transform，同样使用 scale3d，值设置成 1.5, 1.5, 1.5。

最后再用一个 to 设置一下动画的结束状态，用 transform，把 scale3d 的值重新设置成 1, 1, 1。

这个叫 pluse 的动画就是把元素逐渐放大 1.5 倍，再逐渐缩放到原始尺寸。

在上面可以定义一个类，名字叫 pulse， 这个类里面，先用 animation-name ，把要使用的动画名字告诉它，这里就是 pulse ，下面再用 animation-duration ，把动画的时长设置成 1 秒。 animation-iteration-count 设置成 infinite，这样动画会不停的重复播放。

回到 App 组件，找到这个表情符号，这里组它绑定一个 pluse 类，如果组件的 isActive 是 true 就绑定这个类。这样就会在这个元素上使用我们刚才定义的 pulse 动画了。

预览

在浏览器上再试一下，点一下这个按钮，会在 emoji 元素上添加一个 pluse 类，这个类里面用了 pulse 动画。现在你看到的就是这种动画的效果。