CODEWITHSUNDEEP
javascriptjquerycssanimation
Sebastian Ampuero Morisaki
Sebastian Ampuero Morisaki

Reputation: 337

How can I make this Jquery animate() with css3 animations?

This is my jfiddle

And this is my actual code

$card.animate({
            left: "1000px"
        }, 500, function(){
            $card.hide(500);
        });

(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

Upvotes: 3

Views: 98

Answers (2)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

  1. Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
  2. As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.

var my_div = $('.myelement');

my_div.on('click', function() {
  var $this = $(this);
  $this.addClass("gone");
  setTimeout(function(){
    $this.hide();
  }, 600 );
})
#mywrapper
{
  overflow: hidden;
}
.myelement {
  height: 200px;
  width: 200px;
  background-color: red;
  opacity: 1;
  position: relative;
  transition: all 0.5s ease;
  opacity: 1;
  left: 0px;
}

.myelement.gone
{
  left: 500px;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
  Click me please
</div>
</div>

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17351

First of all, create a class that you can trigger via jQuery that will have the animation.

Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.

Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function. 

@keyframes hide {
    99% { display: auto; }
    100%{ display: none; opacity: 0; }
}
.myelement {
    transition: all .5s;
    position: absolute;
    left: 0;
}
.myelement.toLeft {
    left: 2000px;
    animation: hide .5s 1 forwards;
}

To trigger it, simply do this:

$(".myelement").addClass("toLeft");

Here is a working JSFiddle.

And like @MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.

It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.

Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Upvotes: 1

Related Questions