Question

需要你的帮助开发者，我正在使用图像作为菜单。我只是想当我点击图像时它旋转360度然后另一页打开。我试试这个。

<style>
    .image {
        overflow: hidden;
        transition-duration: 0.8s;
        transition-property: transform;
    }
    .image:active {
        -webkit-transform: rotate(360deg);
    }
</style>

html：

<img class="image" src="img path">

在此代码图像旋转取决于点击时间，我希望用户只需点击一次图像旋转360度和链接页面显示。但这不是我想要的。我正在使用jqueryMobile和phonegap

提前感谢。

Answer 1

您可以将图片中的链接网址作为数据属性：

<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt=""  />

然后当你处理点击事件时，

添加动画类。

添加动画完成后触发的animationEnd处理程序。使用one（）而不是on（），因为你只需要触发一次这个处理程序。

在animationEnd处理程序中删除动画类（以便下次再添加），从data-attribute获取url，然后导航到该页面。

$("#theimage").on("click", function(){       
    $(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
        $(this).removeClass("imageRot"); //remove anim class
        var url = $(this).data('linkurl'); //get url from data-attribute
        $( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page      
    });
});

对于动画类，我使用过@ cracker的旋转动画（谢谢饼干！）：

.imageRot {
   -webkit-animation:spin 2s ease-in-out;
    -moz-animation:spin 2s ease-in-out;
    animation:spin 2s ease-in-out;
}
@-moz-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}

这是一个有效的 DEMO

Answer 2

试一试：

<style>
  .image {
    overflow: hidden;
    -webkit-transition: transform 0.8s;
    transition: transform 0.8s;
  }

  .image:active {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>

您未在-webkit-*中添加了webkit选项（transition）。
您未在transform中添加非webkit选项。

因此，无论您使用的是哪种浏览器，都会遗漏某些内容（transform或transition），因此代码无法在任何浏览器上运行。

编辑：我注意到这不是你要求的。我不相信它只能用CSS来完成。如果需要，可以使用jQuery：

<script>
  $(".image").click(function(){
    $(this).addClass("clicked").delay(800).removeClass("clicked");
  });
</script>

<style>
  .image {
    overflow: hidden;
    -webkit-transition: transform 0.8s;
    transition: transform 0.8s;
  }

  .image.clicked {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>

Answer 3

你需要尝试使用

.image {
   -webkit-animation:spin 4s ease-in-out; // No more infinite
    -moz-animation:spin 4s linear;
    animation:spin 4s linear;
}


@-moz-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }

OR

@-webkit-keyframes rotate {  
  100% { -webkit-transform: rotate(360deg); }
}

.rotate {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
}

DEMO1

DEMO2

Answer 4

HTML

<img src = "some_image.png" alt = "test" class = "rotative" />

CSS

.canRotate
{
    -webkit-animation: FullRotation 3s ease-out;
    -o-animation: FullRotation 3s ease-out;
    -ms-animation: FullRotation 3s ease-out;
    -moz-animation: FullRotation 3s ease-out;
    animation: FullRotation 3s ease-out;
} 

@-webkit-keyframes FullRotation
{
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-o-keyframes FullRotation
{
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}

@-ms-keyframes FullRotation
{
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes FullRotation
{
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@keyframes FullRotation
{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

的JavaScript

function RotateOnClickAndOpenPage(classname, url)
{
    var elts = document.getElementsByClassName(classname);

    for(var i = 0; i < elts.length; ++i)
    {
        elts[i].onclick = function(){
            this.style.className = "canRotate";
            var that = this;
            setTimeout(function(){
                window.open(url);
                that.style.className = "cannotRotate";
            }, 3000);
        };
    }
}

// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");

图像旋转360度点击

4 个答案:

DEMO1

DEMO2