带有 onclick 的 CSS3 过渡效果答案

【问题标题】：CSS3 transition effect with onclick带有 onclick 的 CSS3 过渡效果
【发布时间】：2013-12-02 11:04:36
【问题描述】：

我正在研究 CSS3，但遇到了一个问题。

问题如下：

我有一个最初位于屏幕左侧的图像：

.box img{
margin-left:0;
-webkit-transition:1s;
 }

现在，在悬停时，当我希望效果发生时，即。当我将鼠标悬停在图像上时，将图像从左侧移动 500px，代码如下：

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

这非常完美。唯一的问题是当我希望在单击图像时获得相同的效果。那就是我希望图像在单击时从左侧移动 500px 并停留在那里。当我再次单击图像时，它应该会移回原来的位置。

我该怎么办，请解释一下！！！！

【问题讨论】：

正在寻找纯 CSS 解决方案？这可能会有所帮助：stackoverflow.com/questions/21919044/…

标签： javascript css css-transitions

【解决方案1】：

如果你只是想继续使用 css 伪类，那么你可以将你的 img 标记包装在一个无处指向的 a 标记中，为你提供完整的锚伪类堆栈

对于这样的事情：

<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>

然后您可以通过:active psuedo 类使用 css 访问点击：

.box .img_wrapper img {..}
.box .img_wrapper:hover img {..}
.box .img_wrapper:active img {..}

完整参考：http://www.w3schools.com/css/css_pseudo_classes.asp

【讨论】：

【解决方案2】：

您可以使用几乎相同的方法，只需使用 JS/jQuery 来添加/删除具有所有规则的类，例如悬停状态。

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

更新

这里是一个例子：http://jsfiddle.net/Te9T5/ 悬停状态已被移除，因为当悬停和单击执行相同操作时它看起来不太好，因为您需要悬停某些内容才能单击它。

【讨论】：

它似乎不起作用。能举个例子吗？
当然，看看这里：jsfiddle.net/Te9T5。我删除了悬停动画，因为它会导致故障，因为您实际上需要在单击之前悬停。基本上，我只是切换一个类并让 CSS 执行动画，就像您为悬停状态所做的那样。
嘿 Shomz，事情似乎工作正常，但我无法运行脚本代码。它在 jsfiddle 中工作得很好，但在我的代码中却不行。我将 javascript 代码放在标记和

【解决方案3】：

使用 JavaScript，也许你可以做这样的事情？基本上我在示例中所做的是在单击图像时更改margin-left 属性，并根据其位置添加margin-left: 500px; 或margin-left: 0;

请注意，我已在 img 标记中添加了 id，这是为了能够使用 document.getElementById 访问/更改图像的 margin-left 属性。

这是一个demo

HTML

<div class="box">
    <img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>

CSS（添加无前缀过渡）

.box img {
    margin-left:0;
    -webkit-transition: 1s;
            transition: 1s;
}

(function () {
    var move = document.getElementById('move');

    move.onclick = function () {

        if (move.style.marginLeft === "500px") {
            move.style.marginLeft = "0";

        } else {
            move.style.marginLeft = "500px";
        }
    };
})();

【讨论】：

【解决方案4】：

原来 css 有一个 :target 可以使用的伪选择器看一下这个 http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

【讨论】：