Comment ajouter un effet animation-duration

Résolu
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -

bonjour a tous

après avoir trouve mon bonheur avec un code tout fait je souhaiterais pouvoir lui ajouter une animation-duration

Pour l'instant le code fonctionne parfaitement 

Lorsque je clic sur ajouter au panier on voit parfaitement bien l'objet se déplacer vers le panier 

Mais il se déplace trop rapidement 

j'ai bien tente d'essayer d'ajouter une animation-duration lorsque on clic sur ajouter au panier 

mais cela n'a eu aucun effet voici le code complet

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Nice Move To Cart Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="b-cart">Cart (<span class="b-cart__count">0</span>)</div>

<ul class="b-items">
  <li class="b-items__item">
    <a href="#">
      <img class="b-items__item__img" src="http://fakeimg.pl/200x200/?text=World&font=lobster" alt="" />
      <span class="b-items__item__title">Product 8</span>
    </a>
    <a href="#" class="b-items__item__add-to-cart">Add to cart</a>
  </li>
</ul>
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
var cart = $('.b-cart'),
    cartCountCont = cart.find('.b-cart__count'),
    cartCount = parseInt(cartCountCont.text(), 10),
    addToCart = $('.b-items__item__add-to-cart');

addToCart.on('click', function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  
  var el = $(this),
      item = el.parent(),
      img = item.find('.b-items__item__img'),
      cartTopOffset = cart.offset().top - item.offset().top,
      cartLeftOffset = cart.offset().left - item.offset().left;
  
  var flyingImg = $('<img class="b-flying-img">');
  flyingImg.attr('src', img.attr('src'));
  flyingImg.css('width', '200').css('height', '200');

  cartCount += 1;

 flyingImg.animate({
    top: cartTopOffset,
    left: cartLeftOffset,
    width: 50,
    height: 50,
    opacity: 0.1
  }, 800, function () {
    flyingImg.remove();
    cartCountCont.text(cartCount);
  });
  
  el.parent().append(flyingImg);
});
.b-cart {
  width: 150px;
  height: 37px;
  background: #E74C3C;
  color: #fff;
  text-align: center;
  font-family: "Helvetica Neue";
  font-size: 21px;
  padding-top: 13px;
  border-bottom: 3px solid #d83d2d;
  border-radius: 4px;
  margin-left: 13px;
}
.b-cart:hover {
  opacity: 0.8;
}
.b-items {
  margin: 100px 0 0 0;
  padding: 0;
}
.b-items .b-items__item {
  display: inline-block;
  border: 1px solid #eee;
  width: 200px;
  position: relative;
  border-radius: 4px;
  margin: 0 12px 21px 12px;
}
.b-items .b-items__item .b-items__item__img {
  border-radius: 4px 4px 0 0;
}
.b-items .b-items__item a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.b-items .b-items__item a:hover {
  opacity: 0.8;
}
.b-items .b-items__item__title {
  display: block;
  font-size: 18px;
  margin-top: 9px;
  font-family: "Helvetica Neue";
  color: #95A5A6;
}
.b-items .b-items__item__add-to-cart {
  font-family: "Helvetica Neue";
  display: block;
  background: #16A085;
  color: #fff;
  margin-top: 9px;
  padding: 12px 0;
  border-radius: 0 0 4px 4px;
  border-bottom: 2px solid #0a9479;
}
.b-flying-img {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  z-index: 5;
  animation: fly 0.8s 1;
  -webkit-animation: fly 0.8s 1;
  -webkit-backface-visibility: hidden;
}
@keyframes fly {
  0% {
    -moz-transform: rotate(0deg);
    /* Для Firefox */
    -ms-transform: rotate(0deg);
    /* Для IE */
    -o-transform: rotate(0deg);
    /* Для Opera */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    /* Для Firefox */
    -ms-transform: rotate(360deg);
    /* Для IE */
    -o-transform: rotate(360deg);
    /* Для Opera */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fly {
  0% {
    -webkit-transform: rotate(0deg);
    /* Для Safari, Chrome, iOS */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Для Safari, Chrome, iOS */
  }
}
A voir également:

1 réponse

Réponse 1 / 1
Pollux
 

Salut,

si vous parlez de la propriété CSS il suffit de regarder la notice:

https://developer.mozilla.org/fr/docs/Web/CSS/animation-duration

Pour apprendre à utiliser les animations il serait plus pratique de faire ça dans un fichier à part histoire de pas mélanger avec du code déjà existant et bien comprendre le(s) principes en eux même. Suivre un cours précis sur l'animation CSS peut aider aussi, ensuite vous avez compris vous pouvez facilement intégré ce que vous voulez au reste.

https://www.w3schools.com/css/css3_animations.asp
1
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 

salut 

Merci de l'aide 

j'ai fini par trouver

0

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap
Laura -
Lob6 -

15 réponses
Je n'arrive pas à ajouter un ami sur Facebook
Manon -
mimi -

51 réponses