Как предотвратить вызов моей анимации css после использования селектора ": active"?

Ответ 1

Я нашел решение этой проблемы анимация. Я не знаю, это сработает для вас. Но я нашел несколько coding проблем в Jsfiddle.

Проблема с первой проблемой.

Вы не применяете правила W3C. button является закрывающим элементом tag. Он не закрывает элемент tag, например <img /> <br /> и т.д.

Проблема второй проблемы.

Вы должны забыть написать свойство position direction CSS. position: fixed | absolute | sticky необходимо установить направление left | right | top | bottom.

Я много раз тестировал вашу скрипку, почему бы не :active pseudo-class не работать после clicked. Проблема найдена с вашего первого animation. animation и bounceInDown classes содержат свойство transform. Ваш animation не будет работать, пока вы не удалите animation и bunceInDown classes. Поэтому мне нужно написать function для удаления этих classes.

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

Когда я удалил те classes, я заметил, что кнопка исчезла из-за #button opacity: is 0;. Поэтому мне нужно opacity: 1; в #button.

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

Теперь появилась другая проблема. Проблема первая click :active animation не работает. Из-за первого click не разрешалось свойство transform до тех пор, пока animation classes не будут удалены. Затем при добавлении animation classes необходимо добавить a class. После добавления нового class будет работать :active animation.

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

Теперь нужно установить timeOut function для удаления active class для button назад в исходное место для следующего clicked animation. Теперь я могу написать все function вместе.

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

Проверено отрезанное. Надеюсь, это поможет вам выполнить наилучшее решение.

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

$(function(){
	$('#button').on('click', function(){
  	$(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
    	$('#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>

Ответ 2

Я нашел для вас супер классное решение.

Сначала просмотрите предварительный просмотр: https://codepen.io/ziruhel/pen/aVjGMY

Отделите начальный opacity к классу и добавьте этот класс к своей кнопке.

Нравится:

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

И CSS:

.visibility {
  opacity: 0;
}

Теперь удалите анимацию и ваше желание, когда кнопка :active с помощью этого кода:

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

Теперь он перейдет вправо, но отскок все равно останется. Чтобы удалить это подпрыгивание, выполните следующие действия:

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

Он удалит анимацию, которую вы добавили при первой загрузке или инициализации.

Ответ 3

Вы можете использовать Promise, чтобы просто удалить класс bouncing. Проверьте также мелкие модификации css в нижеприведенном фрагменте.

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" />