抽奖转盘的简单思路

抽奖大概是有个旋转的转盘，然后点击开始后，就可以开始转动转盘，同时也在跟后端发送验证请求，然后得到请求之后，开始不转动。
首先，这里有个transform,rotate的知识点，其次，这里有个transition的知识点，原来设置了transition以后，它css属性的改变不会立即改变,而是可以控制改变。
还有一个是transitionend事件，用来检测事件的结束。

这里我们设置结果为一个按钮来调试。比较简单的版本先是这样，后期还有调整的思路。

 <style>
        .cont_img{
            transition: transform 1s linear;
            transform-origin: 50% 85%;
        }
    </style>


<div class="rotate_wrap">
    ![](images/img1.png)
    ![](images/img2.png)
</div>
<button id = "btn">start</button>
<button id="result">result</button>

<script>
    var return_info = false;
    var btn= document.querySelector("#btn");
    var cont_img = document.querySelector(".cont_img");
    var result = document.querySelector("#result");
    var count = 1;
    btn.onclick = function(){
        count = 0;
        cont_img.style.transform = "rotate("+360*count+"deg)";
        count++;
         //调用ajax
    };
    result.onclick = function(e){
        return_info = true;
    };

    cont_img.addEventListener("transitionend",function(e){
        if(return_info){
            cont_img.style.transition = "transform ease-out";
            cont_img.style.transform = "rotate("+360*count+75+"deg)";
        }else{
            cont_img.style.transform = "rotate("+360*count+"deg)";
            count++;
        }
    });

</script>