2017-11-24 29 views
13

Chciałbym dodać animację podskakującą do mojego przycisku. Przycisk powinien wejść na ekran z tą animacją. To działa. Ale potem dodałem: selektor aktywny.Jak zapobiec przywoływaniu animacji css po użyciu selektora ": active"?

#button:active{ 
transform: translateX(20px); 
} 

I nie działa. Po prostu ignoruje ten selektor. Ale domyśliłem się, że po dodaniu nazwy animacji do tego selektora działa. Tylko wtedy problem polega na tym, że powtarza on także moją animację. To może być dowolna nazwa. Nawet nazwa animacji, która nie istnieje. Na przykład:

#button:active{ 
transform: translateX(20px); 
animation-name: not_existing_animation; 
} 

I dlatego potrzebuję pomocy. Zrobiłem skrzypce, żebyś mógł lepiej zobaczyć mój problem: https://jsfiddle.net/gfd2pjbz/3/

+0

Trzeba tę animację na każde kliknięcie? –

+0

Tak, potrzebuję tego za każdym kliknięciem – wymyszony

+0

Masz na myśli ten ruch w prawo (translateY)? – wymyszony

Odpowiedz

5

Znalazłem rozwiązanie dotyczące tego problemu o numerze . Nie wiem, czy to działa dla ciebie. Ale znalazłem kilka numerów coding w twoim Jsfiddle.

Pierwszy problem z dorsza.

Nie przepłynąłeś przez zasady W3C. button jest elementem zamykającym tag. Nie jest to żaden element zamykający tag element taki jak <img /><br /> itp.

Drugi problem z dorsza.

Musisz zapomnieć napisać własność position w kierunku CSS. position: fixed | absolute | sticky należy ustawić kierunek left | right | top | bottom.

Testowałem twoje skrzypce wiele razy, dlaczego nie :activepseudo-class nie działają po clicked. Problem wykryty po pierwszym animation. animation i bounceInDown zawierają właściwość transform. Twój animation nie będzie działał, dopóki nie usuniesz animation i bunceInDownclasses. Więc muszę napisać function, aby usunąć te classes.

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).removeClass('animated bounceInDown'); 
    }); 
}); 

Kiedy usunąłem te classes widziałem przycisku zniknął z powodu #buttonopacity: jest 0;. Potrzebuję więc opacity: 1; w #button.

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).addClass('opacity-visible'); 
    }); 
}); 

Teraz znaleziono inny numer. Problem nie działa po click:activeanimation. Ponieważ pierwsza wersja click nie zezwala na przeniesienie właściwości transform do czasu usunięcia animationclasses. Następnie należy dodać class podczas usuwania tych animation . Po dodaniu nowego class zadziała :activeanimation.

$(function(){ 
    $('#button').on('click', function(){ 
     $(this).addClass('active'); 
    }); 
}); 

Teraz trzeba ustawić timeOutfunction do usunięcia activeclass dla button z powrotem do pierwotnego miejsca dla następnego clickedanimation. Teraz mogę razem napisać wszystkie function.

$(function(){ 
    $('#button').on('click', function(){ 
    $(this).addClass('active opacity-visible'); 
    $(this).removeClass('animated bounceInDown'); 
    setTimeout(function(){ 
     $('#button').removeClass('active'); 
    }, 2000); 
    }); 
}); 

Sprawdzono snipped. Mam nadzieję, że pomoże ci to wykonać najlepsze rozwiązanie.

setTimeout(function(){ 
 
$("#button").addClass("animated bounceInDown"); 
 
}, 1000); 
 

 
$(function(){ 
 
\t $('#button').on('click', function(){ 
 
    \t $(this).addClass('active opacity-visible'); 
 
    $(this).removeClass('animated bounceInDown'); 
 
    setTimeout(function(){ 
 
    \t $('#button').removeClass('active'); 
 
    }, 2000); 
 
    }); 
 
});
*:focus{ 
 
    outline: none !important; 
 
} 
 
*{ 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
 
} 
 
#button { 
 
    position: fixed; 
 
    background-color: green; 
 
    border: 2px solid rgba(0, 0, 0, 0.15); 
 
    border-radius: 4px; 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 20%; 
 
    left: 0; 
 
    width: 20%; 
 
    top: 0; 
 
    opacity: 0; 
 
} 
 

 
#button:active{ 
 
    background-color: red; 
 
    transform: translateX(50%) !important; 
 
/* animation-name: not_existing_animation; */ 
 
} 
 
#button.opacity-visible{ 
 
    opacity: 1; 
 
    transition: transform 0.3s ease-in-out 0s; 
 
} 
 
#button.active{ 
 
    background-color: black; 
 
    transform: translateX(50%) !important; 
 
} 
 

 
/*! 
 
* animate.css -http://daneden.me/animate 
 
* Version - 3.5.2 
 
* Licensed under the MIT license - http://opensource.org/licenses/MIT 
 
* 
 
* Copyright (c) 2017 Daniel Eden 
 
*/ 
 

 
.bounceInDown { 
 
    animation-name: bounceInDown; 
 
    opacity: 1!important; 
 
} 
 

 

 
.animated { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 60%, 75%, 90%, to { 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 

 
    0% { 
 
    opacity: 0; 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 

 
    75% { 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 

 
    90% { 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 

 
    to { 
 
    transform: none; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="button">Click Me</button>

Proponuję, aby nie pisać :activecss dla tego typu animation. Więcej specyfikacji tutaj na MDN.

4

Znalazłem dla Ciebie super fajne rozwiązanie.

Najpierw zobacz Preview:https://codepen.io/ziruhel/pen/aVjGMY

Odrębne początkowe opacity do klasy i dodać tę klasę do przycisku.

odczuwalna:

<button id="button" class="visibility"/> 

i CSS:

.visibility { 
    opacity: 0; 
} 

Teraz usunąć animację i pragnienie przekształcić gdy przycisk jest :active przez ten kod:

#button:active { 
    transform: translate3d(20px, 0, 0); 
    /* transform: translateX(20px); you can also use this */ 
    animation-name: none; 
} 

Zostanie teraz przetłumaczone na prawo, ale odbijanie pozostanie. Aby usunąć to odbijanie, wykonaj następujące czynności:

$(document).on("click", "#button", function() { 
    $(this).removeClass("animated bounceInDown visibility"); 
}); 

Usunie animację dodaną przy pierwszym ładowaniu lub inicjowaniu.

2

Można użyć Promise, aby usunąć po prostu podskakującą klasę . Sprawdź również drobne modyfikacje css w poniższym fragmencie.

var p = new Promise(function(resolve, reject) { 
 
    var $timeout = setTimeout(function() { 
 
    document.getElementById("button").classList.add("animated", "bounceInDown"); 
 
    }, 1000); 
 
    if ($timeout) { 
 
    resolve($timeout); 
 
    } else { 
 
    reject('Failure!'); 
 
    } 
 
}); 
 
p.then(function(response) { 
 
    if (response) { 
 
    setTimeout(function() { 
 
     document.getElementById("button").classList.remove("bounceInDown"); 
 
     console.log("Yay! finished"); 
 
    }, 1900); 
 
    } 
 

 
}).catch(function() { 
 
    console.log("Something went wrong"); 
 
});
#button { 
 
    position: fixed; 
 
    height: 20%; 
 
    width: 20%; 
 
    opacity: 0; 
 
} 
 

 
button.animated:active, 
 
button.animated:focus { 
 
    transform: translateX(20px); 
 
    background-color: red; 
 
} 
 

 
.bounceInDown { 
 
    animation-name: bounceInDown; 
 
    opacity: 1!important; 
 
    animation-fill-mode: both; 
 
    animation-duration: 1s; 
 
} 
 

 
.animated { 
 
    background-color: green; 
 
    opacity: 1!important; 
 
    transition: transform 2s, background-color 1s; 
 
} 
 

 
@keyframes bounceInDown { 
 
    from, 
 
    60%, 
 
    75%, 
 
    90%, 
 
    to { 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    transform: translate3d(0, -3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translate3d(0, 25px, 0); 
 
    } 
 
    75% { 
 
    transform: translate3d(0, -10px, 0); 
 
    } 
 
    90% { 
 
    transform: translate3d(0, 5px, 0); 
 
    } 
 
    to { 
 
    transform: none; 
 
    } 
 
}
<button id="button" />

Powiązane problemy