Second CSS animation on <div> not working with jQuery toggleClass method

Question

I have a div I want to animate in two separate instances: when clicked, I want it to move in a curved path and stay in its final position, then if clicked again I want it to go back to its original position but following the same curved path. The first part of the animation works great, but I can't get the second animation to apply.

CSS:

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

jQuery:

$(".dot").click(function()
{
  $(".dot").toggleClass("dot-up");
  $(".container").toggleClass("container-up");
});

$(".dot-up").click(function()
{
  $(".dot-up").toggleClass("dot-down");
  $(".container-up").toggleClass("container-down");
});

Thanks for the help!

Answer 1

Thank you to everyone that commented here, you helped me understand CSS a lot better. My problem was essentially the type of animation I was using: Instead of translateY and translateX I should have been using specific values, like this:

@keyframes up
{
    from
    {
        top: 75%;
    }
    to
    {
        top: 40%;
    }
}

@keyframes down
{
    from
    {
        top: 40%;
    }
    to
    {
        top: 75%;
    }
}

I am currently using this newfound understanding to create a little codepen demo of my final concept, I will post it here if anyone is interested!

Thanks again from a noob.

Answer 2

The reason your jQuery is not selecting the .dot-up is because it can't find it.

The moment you run your code no .dot-up class exists, thus it can't be selected. This class is afterwards dynamically added to your html.

You can try it this way:

$(".dot").click(function() {
  if ($(this).is(".dot-up, .dot-down")) {
    $(this).toggleClass("dot-down").toggleClass("dot-up");
    $(".container").toggleClass("container-up").toggleClass("container-down");
  } else {
    $(this).toggleClass("dot-up");
    $(".container").toggleClass("container-up");
  }
});

Answer 3

1st: As I pointed you need to use dot before toggleClass()

2nd: using two click events I think it is not the best way

I think you need to do something like this

$(".dot").click(function(){
  $(this).toggleClass("dot-up dot-down");
  $(".container").toggleClass("container-up container-down");
});

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot dot-down">Dot Div</div>
<div class="container container-down">Container</div>

Don't forget in html <div class="dot dot-down"> and <div class="container container-down">

Additional: then if you need to check for appended class you can check for it in the .dot click event by if($(this).hasClass('dot-top')){//do stuff }

Answer 4

jQuery uses dot notation to access properties and functions.
You use it on the selector for your click handlers, you also need to use on the selector for your toggleClass functions.

Read More