wake-up-neo.net

Möglichkeit, eine CSS-Animation beim Entfernen von Klassen umzukehren

Im Wesentlichen versuche ich, einem Element eine CSS-Animation zu geben, wenn es eine Klasse erhält, und dann diese Animation umzukehren, wenn ich die Klasse entferne, ohne die Animation abzuspielen, wenn das DOM rendert.

Geige hier: http://jsfiddle.net/bmh5g/

Wie Sie in der Geige sehen können, dreht #item nach unten, wenn Sie den "Hover Me" -Button bewegen. Wenn Sie den Hover-Button mit der Maus bewegen, wird #item einfach ausgeblendet. Ich möchte, dass #item wieder hochklappt (idealerweise mit der gleichen Animation, aber umgekehrt). Ist das möglich?

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

Ich hätte den #item standardmäßig mit der umgekehrten Animation ausgeblendet. Fügen Sie dann die Klasse hinzu, um die Animation zu erhalten, und zeigen Sie den #item an. 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

Anstatt display: none zu verwenden, besteht ein anderer Ansatz darin, die umgekehrte Animation mit einer Klasse beim Laden der Seite zu unterdrücken und diese Klasse dann mit dem Ereignis zu entfernen, das die normale Animation verwendet (z. B. flipper). So ( http://jsfiddle.net/astrotim/d7omcbrz/1/ ):

CSS - zusätzlich zum flipperUp-Keyframe von Blake über

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

jQuery 

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

Cachen Sie zusätzlich zu den Antworten hier Ihre $(selector).

Also machen Sie diese var elements = $(selector); so ziemlich im Cache.

Warum?! Wenn Sie den Code in den Antworten auf dieser Seite unverändert verwenden, werden Sie jedes Mal vom DOM nach derselben Elementauflistung ($('#item')) gefragt. DOM-Lesen ist ein teurer Vorgang.

Die akzeptierte Antwort würde zum Beispiel so aussehen:

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

Da ich den ganzen Text geschrieben habe, kann er Ihre Frage auch mit CSS-Übergängen beantworten

Ich weiß, dass Sie nach einem Beispiel für CSS-Animationen gefragt haben, aber für die gewünschte Animation (eine Karte, die aufklappt), kann dies leicht mit CSS-Übergängen erreicht werden:

#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

Es wird animiert, mit css zu animieren, damit es animiert werden kann, eine Klasse zu erstellen, beispielsweise .item-up, die die Umwandlung im Gegenteil vornimmt. Dann würden Sie die vorherige Klasse entfernen und die item-up-Klasse hinzufügen es auf.

Ich würde dir eine Js-Geige dafür schreiben, aber ich kenne die Syntax nicht gut genug.

Grundsätzlich, wenn Sie brauchen:

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

und 

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

jsfiddle.net/bmh5g/3 mit freundlicher Genehmigung von Jake

0
Shane

CSS-Lösung von MDN und fast von allen Browsern unterstützt

.animation (Animationsname 10s Leichtgängigkeit, unendliche Alternative, beide laufen;)

0
B Isaac