vue移动端点击一个元素缩小，松手的时候元素恢复正常

Question

现在想要实现一个动画，就是点击的时候这个元素缩小0.5
然后松手的时候这个元素就恢复正常的大小了
请问这个动画应该怎么实现，类似美团外卖下面的底部导航栏

Answer 1

active伪类解决

体验地址： http://jsrun.pro/xrWKp

<div class="box">
</div>

.box {
  width: 100px;
  height: 100px;
  background: green;
  transition: transform 0.3s ease-out;
}

.box:active {
  transform: scale(0.5)
}

Answer 2

添加mousedown和mouseup事件，
在事件中改变元素样式中的sacle或者zoom属性

Answer 3

模板中绑定一个动态class，在data中定义一个Boolean变量，点击触发事件方法来更改Boolean的值

这是Vue中动态切换class的教程 https://cn.vuejs.org/v2/guide...

css可以这样写来实现简单的缩小动画

transform: scale(.5);
transition: allease-in.2s;