Question

我想将旋转方向指向我的自定义选择框，即完成1-TURN或完成循环。如果打开它应顺时针顺时针再次关闭。

这是我尝试过的： http://codepen.io/iahmad/pen/qNvaQr

方向永远都是这样的 http://image.flaticon.com/icons/png/128/120/120869.png

Answer 1

通过简单的jQuery脚本替换，您可以通过以下逻辑实现所需的效果：

img的默认状态为0轮
点击后，应用增加180度旋转的班级[]。
再次点击时，会添加另一个类$response = '{"success":true...}' $json = json_decode($response); //var_dumping this will show you it's an object echo $json->result->token; // 000000000，使旋转周期完成360度。
当open完成转换（1秒后）后，我们删除所有类以恢复旋转为0，但是从360转换为0将会有问题，所以为了避免这种情况，我们暂时禁用转换并将其恢复再次点击下一步。

演示：

.turn

turn

$(function(){
  $('a').on('click', function(){
    var el = $(this);
    if (!el.hasClass('open')) {
      el.children('img').attr('style','');
      el.addClass('open');
    } else {
      el.removeClass('open').addClass('turn');
      setTimeout(function(){ 
      	el.children('img').attr('style','transition: none');
        el.removeClass('turn');
      }, 1000); 
    }
  });
});

jsFiddle：https://jsfiddle.net/azizn/zcnatgxq/

CSS3动画旋转方向 - 选择框

1 个答案: