Question

我的应用程序中有一个投票结构，我正在尝试动画，以便在任何事情被投票时触发。我的html / erb中有以下项目：

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

以下javascript：

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

以下是.downvote的html / erb，点击后会触发动画：

<div class="width: 100%"><%= link_to " ", vote_up_joke_path(joke), class: 'upvote glyphicon glyphicon-chevron-up', method: :post, style: "margin-right: 0; margin-left: 0" %></div>
<div class="width: 100%"><h3 id="joke_<%= joke.id %>_votes" style="margin-top: 0; margin-bottom: 0"><strong><%= joke.plusminus %></strong></h3></div>
<div class="width: 100%"><%= link_to " ", vote_down_joke_path(joke), class: 'downvote glyphicon glyphicon-chevron-down', method: :post, style: "margin-right: 0; margin-left: 0" %></div>

最后，这是我的SCSS：

/* VOTING ANIMATIONS */

.no-show {
    visibility: hidden;
}

.fixed {
  position: fixed;
}

.animation-left-to-right{
  animation: l-r-ballerina linear 5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: l-r-ballerina linear 5s;
  -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 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: l-r-ballerina linear 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: l-r-ballerina linear 5s;
  -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) ; }
}

我几个月来一直在研究这个问题并且无法让它发挥作用。我之前更接近工作（参见我的other帖子），但由于某种原因，即使我拥有的也没有工作（因此是单独的帖子）。任何帮助都是值得赞赏的。

CSS3动画未触发

0 个答案: