使用JavaScript激活CSS过渡

Question

我有一张图片，希望能够点击它并使我的

.image_click:active {
  -webkit-transition-duration: 500ms;
  -webkit-transform: scale(1.5);
}

保持比例！我意识到仅使用CSS无法实现此目标，因为我只有在单击时才能实现过渡效果，但是当我松开鼠标按钮时就会失去它。这个问题需要使用JavaScript解决吗？还是有CSS伪类可以解决这个问题，而我不知道吗？

以下是更好的示例，展示了我想要激活的效果：

.image_flip { 
  -webkit-animation-name: box_walk; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-timing-function: linear; 
} 
@-webkit-keyframes box_walk { 0% {} 100% { -webkit-transform:rotateY(180deg); } }

- pizza247

Answer 1

不要在样式表中仅依赖于:active，而是创建一个带有transforms的单独类。

.image_click_clicked
{
    -webkit-transition-duration: 500ms;
    -webkit-transform: scale(1.5);
}

然后在您的元素上添加一个JS点击事件处理程序

<img src="foo.png" class="image_click" 
     onclick="this.className='image_click_clicked';" />

在谷歌浏览器中似乎正常工作。

- lincolnk