Question

我有一个脚本，当我们被怪物攻击时显示img。因此，图像始终处于display =“none”状态，当有怪物时，它会切换到display =“”;

我希望图像在从display：none切换到显示时进行360°翻转。

html：<img id="monster" style="display:none;">

js：var skinMonster = document.getElementById('monster');

当我们参与战斗时，我会skinMonster.style.display="";

战斗结束后，我会skinMonster.style.display="none";

我不知道怎样检测样式改变旋转图片的时刻。

Answer 1

您可以在更改显示的同一位添加CSS类。

.rotate {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);

    overflow:hidden;

    }

我在这篇博文中略微修改过：http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html

Answer 2

我建议使用CSS转换进行轮换。

<强> HTML

<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>

<强> CSS

#monster {
    opacity: 0;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

#monster.show {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

<强>的JavaScript

var monsterImg = document.getElementById('monster'),
    showMonsterButton = document.getElementById('show');

showMonsterButton.addEventListener('click', function() {

    monsterImg.classList.add('show');

});

JSFiddle用于演示目的：http://jsfiddle.net/9wkA7/

Javascript在显示时旋转图像

2 个答案: