vue 如何实现旋转事件

Question

最近的项目要实现一个转盘转动的效果，所以需要配合旋转事件去做，但是在github上只找到了一个支持vue 1.0的hammer.js，对于2.0只能是可望而不可即了，所以请教大家，有没有实现过类似的功能的，或者是对这个功能有思路的，万分期待和感激你的提点！

Answer 1

貌似原生的没有支持旋转事件的吧，其实你做转盘的思路不就是点击之后用css3的rotate旋转角度，然后慢慢控制旋转越来越来慢，最终停下来嘛。

Answer 2

其实楼主是不知道怎么在 vue 的框架中操作 dom 元素,可以使用自定义指令的方法,定义一个指令,指令里面有当前使用指令的元素,可以在里面使用任何方法实现你的旋转,用 css3等等,这种自定义指令的方式,可以实现很好的封装,在需要的元素上面使用

Answer 3

看这里 官方就有只不过在 next分支中 https://github.com/vuejs/vue-...

Answer 4

可以用css3动画+transform的rotate或者用vue的过渡效果也可以

Answer 5

旋转嘛，首先想到的是 转几圈，开始与结束的转速，以及最后旋转的角度。
我看到你的问题，第一个想到的方案就是，css3 动画 + transform rotate。

1. 使用动画，设置一个旋转的动画样式，也就是设置rotate旋转。以及转速

2. 设置动画循环几遍。

3. 到后面越来越慢你还得需要设计一个转的慢动画样式

4. 最后落在抽中的东西上，根据这个物品当前的排列顺序计算出角度，最后rotate这个角度
   好狗血的转盘抽奖……

基本上跟vue无关的，但是你可以封装为一个vue的组件，方便重用。也可以封装react版的，都一样

Answer 6

css3的rotate和transition属性，实现思路是点击后触发事件将rotate加上你需要的角度，然后配合transition属性可以达到你要的转动效果