Viziionary Viziionary - 5 months ago 14
jQuery Question

How can I stop an CSS animation from interfering with a CSS transform transition?

Lets say I've got a box that I want to wobble when hovered over - a nuance design choice. But when a button is clicked I want the box to transform to the right. It does this, but even though I'm applying

pointer-events: none
to the element, its still reacting to its CSS hover effect telling it to wobble, which interrupts the CSS transform activated by the button click. I'm not sure why
pointer-events: none
isn't doing the job,

To observe this problem, hover over the box after clicking the button, while it's in motion.

How do I keep the wobble animation from interrupting while the transform transition is in progress?



$(function() {
var $box = $('.box');
var $button = $('.button');

$button.on('click', function() {
$box.css({
'transform' : 'translateX(200px)',
'pointer-events' : 'none !important'
});
setTimeout(function(){
$box.css({
'transform' : 'translateX(0px)',
'pointer-events' : ''
});
}, 3000);
});
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

.box {
background-color: lightgray;
width: 100px;
height: 100px;
transition: transform 3s, background-color 1s;
}

.box:hover {
background-color: gold;
animation: wobble 1s;
}

.button {
cursor:pointer;
font-family: 'Open Sans', sans-serif;
margin-top:10px;
text-transform: uppercase;
padding:10px;
background-color:lightgreen;
width:100px;
height:40px;
box-sizing:border-box;
text-align:center;
}

@keyframes wobble {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(3deg);
}
75% {
transform: rotate(-3deg);
}
100% {
transform: rotate(0deg);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="button">button</div>




Answer

You might attached the wobble to a class and toggle the class as you need. I'm not sure you are looking for it, but this solution allows the box to return slide to the left smoothly. It also allows for the color on hove effect to remain working.

$(function() {

  var $box = $('.box');
  var $button = $('.button');
  
  $button.on('click', function() {
    $box.removeClass("wobble");
    $box.addClass("slide");
    setTimeout(function() {
      $box.removeClass("slide");
      setTimeout(function(){ $box.addClass("wobble"); }, 3000);
    }, 3000);
  });

});
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

.box {
  background-color: lightgray;
  width: 100px;
  height: 100px;
  transform : translateX(0px);
  transition: transform 3s, background-color 1s;
}

.box:hover { background-color: gold; }
.box.wobble:hover { animation: wobble 1s; }
.box.slide { transform : translateX(200px); }

.button {
  cursor:pointer;
  font-family: 'Open Sans', sans-serif;
  margin-top:10px;
  text-transform: uppercase;
  padding:10px;
  background-color:lightgreen;
  width:100px;
  height:40px;
  box-sizing:border-box;
  text-align:center;
}

@keyframes wobble {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(3deg); }
   75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box wobble"></div>
<div class="button">button</div>

Comments