web-dev-qa-db-fra.com

Effet de transition CSS3 avec onclick

Je suis en train de me frayer un chemin à travers CSS3 et je suis resté bloqué à un problème.

Le problème est le suivant: 

J'ai une image qui se positionne initialement à gauche de l'écran:

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

Maintenant, en vol stationnaire, quand je veux que l'effet ait lieu, c'est à dire. déplacez l'image 500 pixels de gauche lorsque je survole l'image, le code suivant est le suivant: 

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

Cela fonctionne tout simplement parfait. Le seul problème, c'est quand je veux le même effet quand je clique sur l'image. C’est-à-dire que je veux que l’image bouge de 500 pixels de gauche après clic et y reste . Encore une fois, lorsque je clique sur l’image, elle devrait revenir à sa position initiale.

Comment dois-je m'y prendre, s'il vous plaît expliquez-moi !!!!

javascriptcsscss3css-transitions
10
Abhishek Singh Thakur

Vous pouvez utiliser presque la même approche, utilisez simplement JS/jQuery pour ajouter/supprimer une classe qui possède toutes les règles telles que l'état de survol.

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

METTRE À JOUR

Voici un exemple: http://jsfiddle.net/Te9T5/ L’état de survol est supprimé car il n’a pas l’air agréable si vous avez le survol et le clic qui font la même chose car vous devez survolez quelque chose afin de cliquer dessus.

12
Shomz

Avec JavaScript, vous pourriez peut-être faire quelque chose comme ça? Fondamentalement, dans mon exemple, je modifie la propriété margin-left lorsque l'on clique sur l'image. En fonction de sa position, elle ajoute margin-left: 500px; ou margin-left: 0;. 

Notez que j’ai ajouté une id au img-tag, c’est pour pouvoir utiliser document.getElementById pour accéder à/modifier la propriété margin-left de l’image. 

Voici une démo

HTML

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

CSS (transitions ajoutées non préfixées)

.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

Si vous voulez simplement continuer avec les pseudo-classes css, vous pouvez envelopper votre balise img dans une balise a qui ne pointe nulle part, vous donnant ainsi la pile de classes de pseudo-ancres complète.

Pour quelque chose comme ça: 

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

Vous pouvez ensuite accéder au clic avec css via la classe :active psuedo:

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

Référence complète ici: http://www.w3schools.com/css/css_pseudo_classes.asp

0
Alan L.

Il se trouve que css a un pseudo-sélecteur cible qui peut être utilisé ._

0
sahil lamba