Shifting a div from side to side

Question

Shifting a div from side to side

I don't have much experience with coding, so I was hoping for some assistance.

My goal was to create a div that moves back and forth using toggleClass;

$('div').on('click', function() {
    $(this).toggleClass('active');
});

as well as keyframes;

.active {
    animation-name: moveme;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes moveme {
    0%  {transform: translate(0,0)}
    50%  {transform: translate(-200px, 0px)}
    100%  {transform: translate(-200px,-50px);}
}

However, when the div returns to its original position, it does not animate. I would like the div to animate in reverse with the same animation. Is there a way to achieve this?

You can view what I'm attempting to do here jsfiddle.net/jmrMW/43/ The example is simple now, but it will become more complex in the future.

Thank you kindly for your help! ^^

javascript css animation

Answer 1

Answer №1

When it comes to manipulating classes in Javascript, the effects can be instant. However, if your CSS animations are only bound to the .active class, clicking a second time can cause you to lose that class and therefore lose the animation effect.

Instead of duplicating code like others have suggested, let's think like true programmers and utilize the power of CSS3 animations. Why not try a different approach by setting animation-direction: alternate and animation-play-state: paused, then defining a CSS class for movement:

.moving {
  animation-play-state: running;
}

Next, apply this class to the element for just 1 second after it has been clicked:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

Take a look at this fiddle for a demo.

Update

This solution does have a drawback - using timers in both JS and CSS may not sync perfectly. The animation becomes infinite, going slightly further each cycle. To fix this, we can increment animation-iteration-count to prevent it from proceeding to the next cycle. Still fun experimenting though!

Check out this updated fiddle for more details.

Answer 2

When it comes to manipulating classes in Javascript, the effects can be instant. However, if your CSS animations are only bound to the .active class, clicking a second time can cause you to lose that class and therefore lose the animation effect.

Instead of duplicating code like others have suggested, let's think like true programmers and utilize the power of CSS3 animations. Why not try a different approach by setting animation-direction: alternate and animation-play-state: paused, then defining a CSS class for movement:

.moving {
  animation-play-state: running;
}

Next, apply this class to the element for just 1 second after it has been clicked:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

Take a look at this fiddle for a demo.

Update

This solution does have a drawback - using timers in both JS and CSS may not sync perfectly. The animation becomes infinite, going slightly further each cycle. To fix this, we can increment animation-iteration-count to prevent it from proceeding to the next cycle. Still fun experimenting though!

Check out this updated fiddle for more details.

Answer 3

Answer №2

I have created a modified version of your JSFiddle code. I essentially replicated the keyframes you already had but implemented them in reverse for a different effect. Feel free to check it out!

$('div').on('click', function() {
  if ( $(this).hasClass("go-up") ) {
    $(this).removeClass("go-up").addClass("go-down");
  } else {
    $(this).addClass("go-up").removeClass("go-down');
  }
});

div{
  background:#aaa;
  width: 200px;
  margin: 20vh auto;
  height: 200px;
}
.go-up {
  animation-name: moveup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.go-down {
  animation-name: movedown;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes moveup {
  0%  {transform: translate(0,0)}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(-100px,-50px);}
}

@keyframes movedown {
  0%  {transform: translate(-100px,-50px);}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(0,0)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

Check out the modified version here.

Answer 4

I have created a modified version of your JSFiddle code. I essentially replicated the keyframes you already had but implemented them in reverse for a different effect. Feel free to check it out!

$('div').on('click', function() {
  if ( $(this).hasClass("go-up") ) {
    $(this).removeClass("go-up").addClass("go-down");
  } else {
    $(this).addClass("go-up").removeClass("go-down');
  }
});

div{
  background:#aaa;
  width: 200px;
  margin: 20vh auto;
  height: 200px;
}
.go-up {
  animation-name: moveup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.go-down {
  animation-name: movedown;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes moveup {
  0%  {transform: translate(0,0)}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(-100px,-50px);}
}

@keyframes movedown {
  0%  {transform: translate(-100px,-50px);}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(0,0)}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

Check out the modified version here.

Shifting a div from side to side

Answer №1

Answer №2

Similar questions

How to easily transfer a JSON file to a server using Vue and Node.js

What could be the reason for receiving an HttpErrorResponse when making a GET request that returns byte data

Leveraging dependency injection in Angular 2+ with pre-loaded models

Incorporating an SVG with CSS styling from a stylesheet

Background color for the DIV is not displaying properly when it is set to the

Expand Menu Options (jQuery)

How is it that cross-domain scripting is able to occur with local files on a smartphone or tablet?

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Utilize Vue.js methods to reverse the string within a paragraph using the appropriate function

Reduce XSLTProcessor output by 50%

I am having trouble getting my textarea to accept width attributes

Choose the currently active md-tab within the md-dialog's md-tab-group

Re-sequence a contiguous array by mapping and filtering its elements

Instructions on deactivating the background when the sidebar is displayed and closing the sidebar by clicking anywhere other than the sidebar

Leveraging multer for handling a FormData object in a node.js server

Angular utilizes ZoneAwarePromise rather than a plain String output

Tips for ensuring only one dropdown is opened at a time

The identical items combined into a single array

Navigate the user to various pages in a Node.js application based on login status

When we typically scroll down the page, the next section should automatically bring us back to the top of the page