javascript - 使用 javascript 激活 css 转换

Question

我有一个 img，我希望能够点击它并拥有我的

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

保持规模!我意识到仅靠 css 无法做到这一点，因为我在单击时实现了转换，但在我释放鼠标按钮时失去了它。 Javascript 是解决这个问题的方法吗？有没有我不知道的可以做到这一点的 css psudoclass？

这是我想要激活的更好的例子

.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); } }

Answer 1

与其依赖样式表中的 :active，不如使用转换创建一个单独的类。

.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';" />

似乎在 chrome 中工作正常。