web-dev-qa-db-fra.com

Possible d'inverser une animation CSS sur la suppression de classe?

Ce que j'essaie essentiellement de faire, c'est de donner une animation CSS à un élément lorsqu'il gagne une classe, puis de l'inverser lorsque je supprime la classe sans la lire lorsque le DOM affiche.

Violon ici: http://jsfiddle.net/bmh5g/

Comme vous pouvez le voir dans le violon, lorsque vous passez le bouton "Survolez-moi", #item bascule. Lorsque vous cliquez avec le bouton de survol, #item disparaît. Je veux que #item retourne en arrière (idéalement, en utilisant la même animation mais en sens inverse). Est-ce possible?

HTML:

<div id='trigger'>Hover Me</div>
<div id='item'></div>

CSS:

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;

    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-Origin: 50% 0%;
    transform-Origin: 50% 0%;
}

#item.flipped
{
    animation: flipper 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipper 0.7s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes flipper
{
    0% { transform: perspective(350px) rotateX(-90deg); }
    33% { transform: perspective(350px) rotateX(0deg); }
    66% { transform: perspective(350px) rotateX(10deg); }
    100% { transform: perspective(350px) rotateX(0deg); }
}

@-webkit-keyframes flipper
{
    0% { -webkit-transform: perspective(350px) rotateX(-90deg); }
    33% { -webkit-transform: perspective(350px) rotateX(0deg); }
    66% { -webkit-transform: perspective(350px) rotateX(10deg); }
    100% { -webkit-transform: perspective(350px) rotateX(0deg); }
}

Javascript:

$('#trigger').on({
    mouseenter: function(){
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})
javascriptjqueryhtmlcsscss3
49
Jake

Je voudrais que le #item commence par être masqué avec l'animation inverse par défaut. Ajoutez ensuite la classe pour lui donner l'animation et affichez le #item. http://jsfiddle.net/bmh5g/12/

jQuery

$('#trigger').on({
    mouseenter: function(){
        $('#item').show();
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
});

CSS

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    display: none;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-Origin: 50% 0%;
    transform-Origin: 50% 0%;
    animation: flipperUp 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipperUp 0.7s;
    -webkit-animation-fill-mode: forwards;
}
20
Blake Plumb

Une autre approche, plutôt que d'utiliser display: none, consiste à supprimer l'animation inversée avec une classe lors du chargement de la page, puis à supprimer cette classe avec le même événement que l'application normale (par exemple: flipper). Comme si ( http://jsfiddle.net/astrotim/d7omcbrz/1/ ):

CSS - en plus de l'image clé flipperUp publiée par Blake ci-dessus

#item.no-animation 
{
  animation: none;
}

jQuery 

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('no-animation');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})
6
Astrotim

En plus des réponses ici, veuillez mettre en cache votre $(selector)

Donc, vous faites à peu près cette var elements = $(selector); pour mettre en cache.

Pourquoi?! Parce que si vous utilisez le code dans les réponses sur cette page tel quel, vous demanderez à chaque fois au DOM cette même collection d’éléments ($('#item')). La lecture DOM est une opération coûteuse.

Par exemple, la réponse acceptée ressemblerait à quelque chose comme ceci:

var item = $('#item');
$('#trigger').on({
    mouseenter: function(){
        item.show();
        item.addClass('flipped');
    },
    mouseleave: function(){
        item.removeClass('flipped');
    }
});

Depuis que j'ai écrit tout ce texte, vous pouvez aussi bien répondre à votre question en utilisant des transitions CSS

Je sais que vous avez demandé un exemple d'animation CSS, mais pour l'animation que vous souhaitiez créer (une carte ouverte), vous pouvez facilement l'obtenir à l'aide de transitions CSS:

#item {
  width: 70px;
  height: 70px;
  background-color: black;
  line-height: 1;
  color: white;
}

#item+div {
  width: 70px;
  height: 100px;
  background-color: blue;
  transform: perspective(250px) rotateX(-90deg);
  transform-Origin: 50% 0%;
  transition: transform .25s ease-in-out
}

#item:hover+div {
  transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

3
Kitanga Nday

Son animation en utilisant css donc pour le faire s'animer, vous devez créer une classe, disons .item-up qui effectue la transformation dans le sens opposé afin que vous supprimiez la classe précédente et ajoutiez la classe item-up et qui devrait animer ça va.

Je voudrais vous écrire un violon pour cela, mais je ne connais pas assez bien la syntaxe.

Fondamentalement, quand vous aurez besoin de:

@keyframes flipper
@keyframes flipper-up  //This does the opposite of flipper

et 

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('flipped-up');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
        $('#item').addClass('flipped-up');
    }
})

jsfiddle.net/bmh5g/3 avec l'aimable autorisation de Jake

0
Shane

Solution CSS de MDN et presque supportée par tous les navigateurs

.animation (animationName 10s facilité infinie alternative alternée à la fois en cours d'exécution;)

0
B Isaac