Tôi đã tìm thấy giải pháp về vấn đề này hoạt hình. Tôi không biết là nó làm việc cho bạn. Nhưng tôi đã tìm thấy một số sự cố coding trong số Jsfiddle của bạn.
Sự cố mã hóa đầu tiên.
Bạn chưa lưu các quy tắc W3C. button là yếu tố đóng thành phần tag. Không phải không có yếu tố nào đóng thành phần tag như <img /><br /> v.v.
Vấn đề mã hóa thứ hai.
Bạn phải quên viết position hướng CSS thuộc tính. position: fixed | absolute | sticky cần đặt left | right | top | bottom hướng.
Tôi đã kiểm tra fiddle nhiều lần tại sao không :activepseudo-class không hoạt động sau clicked. Sự cố được tìm thấy từ animation đầu tiên của bạn. animation và bounceInDownclasses có chứa thuộc tính transform. animation của bạn sẽ không hoạt động cho đến khi bạn xóa animation và bunceInDownclasses. Vì vậy, tôi cần phải viết một function để xóa những số classes.
$(function(){
$('#button').on('click', function(){
$(this).removeClass('animated bounceInDown');
});
});
Khi tôi loại bỏ những nút classes tôi thấy là biến mất vì #buttonopacity: là 0;. Vì vậy, tôi cần opacity: 1; trong #button.
$(function(){
$('#button').on('click', function(){
$(this).addClass('opacity-visible');
});
});
Bây giờ, tìm thấy một vấn đề khác. Vấn đề là trước tiên click:activeanimation không hoạt động. Vì số click đầu tiên không cho phép tài sản transform cho đến khi animationclasses bị xóa. Sau đó, cần thêm class khi xóa các số animationclasses. Sau khi thêm mới class, :activeanimation sẽ hoạt động.
$(function(){
$('#button').on('click', function(){
$(this).addClass('active');
});
});
Bây giờ cần phải thiết lập một timeOutfunction cho tháo activeclass cho button trở lại vị trí ban đầu cho tới clickedanimation. Bây giờ tôi có thể viết tất cả function với nhau.
$(function(){
$('#button').on('click', function(){
$(this).addClass('active opacity-visible');
$(this).removeClass('animated bounceInDown');
setTimeout(function(){
$('#button').removeClass('active');
}, 2000);
});
});
Đã kiểm tra việc bị cắt. Tôi hy vọng nó sẽ giúp bạn thực hiện giải pháp tốt nhất.
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>
Tôi đề nghị bạn không viết :activecss cho loại animation. Thêm thông số kỹ thuật tại đây trên MDN.
Bạn cần hoạt hình này trên mỗi nhấp chuột? –
Có, tôi cần nó trên mỗi nhấp chuột – wymyszony
Bạn có nghĩa là di chuyển này sang phải (dịchY)? – wymyszony