Question

当我将鼠标悬停在黄色方块上时，我正试图为其设置动画。我想我几乎尝试了所有东西，但它不想动。但是，如果我将相同的过渡和变换应用于输入字段，它将开始旋转。这里有什么问题？谢谢你的帮助。

#sqre {
display: block;
width: 200px;
height: 200px;
background-color: gold;
border: 2px solid black;
transition: 1s;
}

#sqre:hover {
transform: rotateZ(360deg);
}

<input type="tel" name="numb" />
<div id="sqre">square</div>

Answer 1

在移动设备上无法进行悬停，因为没有持久性光标 - 默认情况下最后一个触摸点的内存。

他们能够感知互动的唯一方式就是触摸，这类似于点击或选择，因此在Javascript中点击其他合适的移动设备。

$('#sqre').click(function() {
  $(this).toggleClass('toggle');
  $('#sqre').not(this).removeClass('toggle');
});

#sqre {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 2px solid black;
  transition: 1s;
}

#sqre.toggle {
  transform: rotateZ(360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="numb" />
<div id="sqre">square</div>

Answer 2

在这里查看我将rotateZ更改为-webkit-transform: rotate(360deg)，它完美无缺 jsFiddle

Answer 3

看起来你在问题中使用的代码工作得很好。你可以在下面看到它：

＆＃13;

#sqre {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 2px solid black;
  transition: 1s;
}

#sqre:hover {
  transform: rotateZ(360deg);
}

＆＃13;

<input type="tel" name="numb" />
<div id="sqre">square</div>

＆＃13;

此外，如果您正在努力实现其他目标，请告诉我们。

Answer 4

它不适用于我发布的代码，也不适用于-webkit-前缀。这真的很奇怪，因为输入字段转换工作完全正常。它可能是Safari移动问题吗？

为什么过渡不起作用？

4 个答案: