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.
Trzeba tę animację na każde kliknięcie? –
Tak, potrzebuję tego za każdym kliknięciem – wymyszony
Masz na myśli ten ruch w prawo (translateY)? – wymyszony