Je voudrais ajouter une animation rebondissante à mon bouton. Le bouton doit entrer dans l'écran avec cette animation. Ça marche. Mais après cela, j'ai ajouté un: sélecteur actif.

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

Et je ne travaille pas. Il ignore simplement ce sélecteur. Mais j'ai compris qu'après avoir ajouté un nom d'animation à ce sélecteur, cela fonctionnait. Seulement alors, mais le problème est qu'il répète également mon animation de rebond. Cela peut être n'importe quel nom. Même un nom d'animation qui n'existe pas. Par exemple:

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

Et c'est pourquoi j'ai besoin d'aide. J'ai fait un violon pour vous permettre de mieux voir mon problème: https://jsfiddle.net/gfd2pjbz/3/

12
wymyszony 24 nov. 2017 à 19:13

3 réponses

Meilleure réponse

J'ai trouvé une solution à ce problème d ' animation . Je ne sais pas si ça marche pour toi. Mais j'ai trouvé quelques coding problèmes dans votre Jsfiddle .

Premier problème de codage.

Vous n'avez pas appliqué les règles du W3C . button est un élément de fermeture tag. Ce n'est pas un élément de fermeture tag comme <img /> <br /> etc.

Deuxième problème de codage.

Vous devez oublier d'écrire la propriété position direction CSS. position: fixed | absolute | sticky doit définir la direction left | right | top | bottom.

J'ai testé votre violon plusieurs fois pourquoi :active pseudo-class ne fonctionne pas après clicked. Problème détecté lors de votre premier animation. animation et bounceInDown classes contiennent la propriété transform. Votre animation ne fonctionnera pas tant que vous n'aurez pas supprimé animation et bunceInDown classes. Je dois donc écrire un function pour supprimer ces classes.

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

Lorsque j'ai supprimé ces classes, le bouton que j'ai vu a disparu car #button opacity: est 0;. J'ai donc besoin de opacity: 1; dans #button.

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

Maintenant trouvé un autre problème. Le problème est le premier click :active animation ne fonctionne pas. En raison du premier click, la propriété transform n'a pas été autorisée tant que animation classes n'est pas supprimé. Ensuite, vous devez ajouter un class lors de la suppression de ces animation classes. Après avoir ajouté un nouveau class, le :active animation fonctionnera.

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

Vous devez maintenant définir un timeOut function pour supprimer le active class pour button revenir à son emplacement d'origine pour la prochaine clicked animation . Maintenant, je peux tout écrire function ensemble.

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

Vérifié le coupé. J'espère que cela vous aidera à trouver la meilleure solution.

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>

Je vous suggère de ne pas écrire :active css pour ce type de animation. Plus de spécifications ici sur MDN.

5
Rahul 26 nov. 2017 à 19:45

Vous pouvez utiliser un Promise pour supprimer simplement la classe rebondissante . Vérifiez également les modifications css mineures dans l'extrait ci-dessous.

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" />
2
Peter Darmis 2 déc. 2017 à 20:11

J'ai trouvé une solution super cool pour vous.

Consultez d'abord l'aperçu: https://codepen.io/ziruhel/pen/ aVjGMY

Séparez l'initiale opacity d'une classe et ajoutez cette classe à votre bouton.

J'aime:

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

Et CSS:

.visibility {
  opacity: 0;
}

Supprimez maintenant l'animation et votre désir de transformer lorsque le bouton est :active par ce code:

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

Cela va maintenant se traduire vers la droite, mais le rebond reste toujours. Pour supprimer ce rebond, procédez comme suit:

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

Cela supprimera l'animation que vous avez ajoutée lors du premier chargement ou initialisation.

4
Zahidul Islam Ruhel 26 nov. 2017 à 19:58
47476859