web-dev-qa-db-ja.com

onclickによるCSS3トランジション効果

私はCSS3を使って作業を進めていますが、ちょっと問題があります。

問題は次のとおりです。

私は最初に画面の左側に位置する画像を持っています：

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

今、ホバリングで、エフェクトを発生させたいとき、つまり。画像の上にマウスを置いたときに画像を左から500px移動すると、コードは次のとおりです

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

これは完璧に機能します。唯一の問題は、画像をクリックしたときに同じ効果が必要な場合です。つまり、クリックすると画像が左から500ピクセル移動し、そこにとどまるようにします。再び画像をクリックすると、元の位置に戻ります。

どうすればいいですか、説明してください!!!!

javascriptcsscss3css-transitions
10
Abhishek Singh Thakur

ほとんど同じアプローチを使用できます。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/ ホバー状態は削除されます何かをホバーしてクリックします。

12
Shomz

JavaScriptを使用すると、このようなことができますか？基本的に、この例で行っているのは、画像をクリックしたときにmargin-leftプロパティを変更し、その位置に基づいてmargin-left: 500px;またはmargin-left: 0;を追加することです

Imgタグにidを追加したことに注意してください。これは、document.getElementByIdを使用して、画像のmargin-leftプロパティにアクセス/変更できるようにするためです。

ここにデモ

[〜＃〜] 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;
}

[〜＃〜] js [〜＃〜]

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

    move.onclick = function () {

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

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

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

0
Alan L.

Cssには：target Pseudo-selectorがあり、これを使用することができます http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

0
sahil lamba