Триггер анимации CSS3 с помощью JQuery Нажмите на другой элемент

У меня ситуация с reddit-upvote/downvote, которая происходит в моем приложении Rails, и я пытаюсь создать анимацию CSS3, так что когда пользователь нажимает на любую из нисходящих ссылок, она запускает анимацию.

Я использую JQuery следующим образом:

<div class="animations">
  <%= image_tag "ballerino.png", class: "fixed no-display", id: "to-animate", style: "margin-top: 80px; width: 40%" %>

  <script>
    $("#downvote").on('click',function() {
      $('#to-animate').removeClass('fixed');
      $('#to-animate').removeClass('no-display');
      $('#to-animate').addClass('animation-left-to-right');
    });
  </script>

</div> <!-- animations -->

С этим дальше вниз по странице как частичное изображение для каждого объекта Joke:

<div class="text-center col-xs-1">
  <% if current_user %>
    <div class="width: 100%"><%= link_to " ", joke_up_vote_path(joke), id: "upvote", class: 'glyphicon glyphicon-chevron-up', method: :post, style: "margin-right: 0; margin-left: 0" %></div>
  <% else %>
    <div class="width: 100%"><%= link_to " ", new_user_session_path, id: "upvote", class: 'glyphicon glyphicon-chevron-up', method: :post, style: "margin-right: 0; margin-left: 0" %></div>
  <% end %>
  <div class="width: 100%"><h3 style="margin-top: 0; margin-bottom: 0"><strong><%= joke.points %></strong></h3></div>
  <% if current_user %>
    <div class="width: 100%"><%= link_to " ", joke_down_vote_path(joke), id: "downvote", class: 'glyphicon glyphicon-chevron-down', method: :post, style: "margin-right: 0; margin-left: 0" %></div>
  <% else %>
    <div class="width: 100%"><%= link_to " ", new_user_session_path, id: "downvote", class: 'glyphicon glyphicon-chevron-down', method: :post, style: "margin-right: 0; margin-left: 0" %></div>
  <% end %>
</div>

И, наконец, здесь мой CSS для моих анимаций из моего файла application.scss:

/* ANIMATIONS */

.animation-left-to-right{
  animation: l-r-ballerina linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: l-r-ballerina linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: l-r-ballerina linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: l-r-ballerina linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: l-r-ballerina linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes l-r-ballerina{
  0% { transform:  translate(-400px,0px)  rotate(0deg) ; }
  10% { transform:  translate(-200px,0px)  rotate(-10deg) ; }
  20% { transform:  translate(-100px,0px)  rotate(10deg) ; }
  30% { transform:  translate(0px,0px)  rotate(-10deg) ; }
  40% { transform:  translate(100px,0px)  rotate(10deg) ; }
  50% { transform:  translate(300px,0px)  rotate(-10deg) ; }
  100% { transform:  translate(3000px,0px)  rotate(-10deg) ; }
}

@-moz-keyframes l-r-ballerina{
  0% { -moz-transform:  translate(-400px,0px)  rotate(0deg) ; }
  10% { -moz-transform:  translate(-200px,0px)  rotate(-10deg) ; }
  20% { -moz-transform:  translate(-100px,0px)  rotate(10deg) ;  }
  30% { -moz-transform:  translate(0px,0px)  rotate(-10deg) ; }
  40% { -moz-transform:  translate(100px,0px)  rotate(10deg) ; }
  50% { -moz-transform:  translate(300px,0px)  rotate(-10deg) ; }
  100% {-moz-transform:  translate(3000px,0px)  rotate(-10deg) ; }
}

@-webkit-keyframes l-r-ballerina {
  0% { -webkit-transform:  translate(-400px,0px)  rotate(0deg) ; }
  10% { -webkit-transform:  translate(-200px,0px)  rotate(-10deg) ; }
  20% { -webkit-transform:  translate(-100px,0px)  rotate(10deg) ; }
  30% { -webkit-transform:  translate(0px,0px)  rotate(-10deg) ; }
  40% { -webkit-transform:  translate(100px,0px)  rotate(10deg) ; }
  50% { -webkit-transform:  translate(300px,0px)  rotate(-10deg) ; }
  100% { -webkit-transform:  translate(3000px,0px)  rotate(-10deg) ; }
}

@-o-keyframes l-r-ballerina {
  0% { -o-transform:  translate(-400px,0px)  rotate(0deg) ; }
  10% { -o-transform:  translate(-200px,0px)  rotate(-10deg) ; }
  20% { -o-transform:  translate(-100px,0px)  rotate(10deg) ; }
  30% { -o-transform:  translate(0px,0px)  rotate(-10deg) ; }
  40% { -o-transform:  translate(100px,0px)  rotate(10deg) ; }
  50% { -o-transform:  translate(300px,0px)  rotate(-10deg) ; }
  100% { -o-transform:  translate(3000px,0px)  rotate(-10deg) ; }
}

@-ms-keyframes l-r-ballerina {
  0% { -ms-transform:  translate(-400px,0px)  rotate(0deg) ; }
  10% { -ms-transform:  translate(-200px,0px)  rotate(-10deg) ; }
  20% { -ms-transform:  translate(-100px,0px)  rotate(10deg) ; }
  30% { -ms-transform:  translate(0px,0px)  rotate(-10deg) ; }
  40% { -ms-transform:  translate(100px,0px)  rotate(10deg) ; }
  50% { -ms-transform:  translate(300px,0px)  rotate(-10deg) ; }
  100% { -ms-transform:  translate(3000px,0px)  rotate(-10deg) ; }
}

.fixed {
  position: fixed;
}

.no-display {
  display: none;
}

Может ли кто-нибудь помочь мне устранить эту проблему? Я новичок в анимации и JQuery... плохая комбинация.

ADDED FIDDLE

$(".downvote").on('click', function() {
  $('#to-animate').removeClass('fixed');
  $('#to-animate').removeClass('no-display');
  $('#to-animate').addClass('animation-left-to-right');
});
/* ANIMATIONS */

.animation-left-to-right {
  animation: l-r-ballerina linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: l-r-ballerina linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: l-r-ballerina linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: l-r-ballerina linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: l-r-ballerina linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}
@keyframes l-r-ballerina {
  0% {
    transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-moz-keyframes l-r-ballerina {
  0% {
    -moz-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -moz-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -moz-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -moz-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -moz-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -moz-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -moz-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-webkit-keyframes l-r-ballerina {
  0% {
    -webkit-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -webkit-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -webkit-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -webkit-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-o-keyframes l-r-ballerina {
  0% {
    -o-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -o-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -o-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -o-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -o-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -o-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -o-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-ms-keyframes l-r-ballerina {
  0% {
    -ms-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -ms-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -ms-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -ms-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -ms-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -ms-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -ms-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
.fixed {
  position: fixed;
}
.no-display {
  display: none;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet" />

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed no-display" id="to-animate" style="margin-top: 80px; width: 40%; background: blue; height: 20px;">
  Box to Animate
</div>

<div class="text-center col-xs-1">


  <div class="width: 100%">
    <a class="upvote glyphicon glyphicon-chevron-up" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
  <div class="width: 100%">
    <h3 style="margin-top: 0; margin-bottom: 0"><strong>0</strong></h3>
  </div>
  <div class="width: 100%">
    <a class="downvote glyphicon glyphicon-chevron-down" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Я не уверен, что понял вашу проблему, но ожидаете ли вы чего-то подобного?

$(".downvote").on('click', function() {
  //$('#to-animate').removeClass('fixed');
  $('#to-animate').removeClass('no-display');
  $('#to-animate').addClass('animation-left-to-right');
});
/* ANIMATIONS */

.animation-left-to-right {
  animation: l-r-ballerina linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: l-r-ballerina linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: l-r-ballerina linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: l-r-ballerina linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: l-r-ballerina linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}
@keyframes l-r-ballerina {
  0% {
    transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-moz-keyframes l-r-ballerina {
  0% {
    -moz-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -moz-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -moz-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -moz-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -moz-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -moz-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -moz-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-webkit-keyframes l-r-ballerina {
  0% {
    -webkit-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -webkit-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -webkit-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -webkit-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-o-keyframes l-r-ballerina {
  0% {
    -o-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -o-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -o-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -o-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -o-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -o-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -o-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-ms-keyframes l-r-ballerina {
  0% {
    -ms-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -ms-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -ms-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -ms-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -ms-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -ms-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -ms-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
.fixed {
  position: fixed;
}
.no-display {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="fixed no-display" id="to-animate" style="margin-top: 80px; width: 40%; background: blue; height: 20px;">
  Box to Animate
</div>

<div class="text-center col-xs-1">


  <div class="width: 100%">
    <a class="upvote glyphicon glyphicon-chevron-up" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
  <div class="width: 100%">
    <h3 style="margin-top: 0; margin-bottom: 0"><strong>0</strong></h3>
  </div>
  <div class="width: 100%">
    <a class="downvote glyphicon glyphicon-chevron-down" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
</div>

Ответ 2

Если вы хотите, чтобы ваша страница обновлялась после того, как закончилась анимация или произошло событие окончания перехода, вам нужно будет прослушать тот или иной. Я добавил слушателя для обоих, включая префиксы браузера. Ваша анимация длинная и продолжается с экрана, поэтому она выглядит довольно изворотливой, но вы получаете общую идею.

$(".downvote").on('click', function() {
  var href = "http://stackoverflow.com/info/38934608/css3-animation-trigger-with-jquery-click-to-other-element";
   $('#to-animate').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend", function(e) {
    //Stub handler
    //Your logic goes here
    if(confirm("Detected " + e.type + " event.  Redirect to " + href + "?")){
      window.location.href = href;
    } 
   })
  $('#to-animate').removeClass('fixed');
  $('#to-animate').removeClass('no-display');
  $('#to-animate').addClass('animation-left-to-right');
});
/* ANIMATIONS */

.animation-left-to-right {
  animation: l-r-ballerina linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: l-r-ballerina linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: l-r-ballerina linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: l-r-ballerina linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: l-r-ballerina linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}
@keyframes l-r-ballerina {
  0% {
    transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-moz-keyframes l-r-ballerina {
  0% {
    -moz-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -moz-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -moz-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -moz-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -moz-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -moz-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -moz-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-webkit-keyframes l-r-ballerina {
  0% {
    -webkit-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -webkit-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -webkit-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -webkit-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-o-keyframes l-r-ballerina {
  0% {
    -o-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -o-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -o-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -o-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -o-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -o-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -o-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
@-ms-keyframes l-r-ballerina {
  0% {
    -ms-transform: translate(-400px, 0px) rotate(0deg);
  }
  10% {
    -ms-transform: translate(-200px, 0px) rotate(-10deg);
  }
  20% {
    -ms-transform: translate(-100px, 0px) rotate(10deg);
  }
  30% {
    -ms-transform: translate(0px, 0px) rotate(-10deg);
  }
  40% {
    -ms-transform: translate(100px, 0px) rotate(10deg);
  }
  50% {
    -ms-transform: translate(300px, 0px) rotate(-10deg);
  }
  100% {
    -ms-transform: translate(3000px, 0px) rotate(-10deg);
  }
}
.fixed {
  position: fixed;
}
.no-display {
  display: none;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet" />

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fixed no-display" id="to-animate" style="margin-top: 80px; width: 40%; background: blue; height: 20px;">
  Box to Animate
</div>

<div class="text-center col-xs-1">


  <div class="width: 100%">
    <a class="upvote glyphicon glyphicon-chevron-up" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
  <div class="width: 100%">
    <h3 style="margin-top: 0; margin-bottom: 0"><strong>0</strong></h3>
  </div>
  <div class="width: 100%">
    <a class="downvote glyphicon glyphicon-chevron-down" style="margin-right: 0; margin-left: 0" rel="nofollow" data-method="post" href="#"></a>
  </div>
</div>