堆栈内存溢出
  繁体   English   中英

使用JQuery的CSS3动画触发器单击其他元素

[英]CSS3 Animation Trigger with JQuery Click to Other Element

 原文  2016-08-13 16:10:54  1   2    jquery/ ruby-on-rails/ css3

问题描述

我在我的Rails应用程序中有一个类似reddit的upvote / downvote情况，我正在尝试制作CSS3动画，以便当用户点击任何downvote链接时它会触发动画。

我正在使用这样的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>

最后，这是我的application.scss文件中的动画CSS： 

/* 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的新手......一个糟糕的组合。

加上好话 

 $(".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: lr-ballerina linear 4s; animation-iteration-count: 1; transform-origin: 50% 50%; animation-fill-mode: forwards; /*when the spec is finished*/ -webkit-animation: lr-ballerina linear 4s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: lr-ballerina linear 4s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: lr-ballerina linear 4s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: lr-ballerina linear 4s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode: forwards; /*IE 10+*/ } @keyframes lr-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 lr-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 lr-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 lr-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 lr-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>

我认为这模拟了这个问题。 我添加了一个div而不是一个图像，但具有相同的id所以它是可见的......

2 个解决方案

解决方案1
 4 已采纳  2016-08-19 08:00:54

我不确定我是否理解你的问题，但你是否期待这样的事情？ 

 $(".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: lr-ballerina linear 4s; animation-iteration-count: 1; transform-origin: 50% 50%; animation-fill-mode: forwards; /*when the spec is finished*/ -webkit-animation: lr-ballerina linear 4s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: lr-ballerina linear 4s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: lr-ballerina linear 4s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: lr-ballerina linear 4s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode: forwards; /*IE 10+*/ } @keyframes lr-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 lr-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 lr-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 lr-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 lr-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
 0  2016-08-25 21:54:43

如果您希望在动画结束触发或转换结束事件触发后刷新页面，则需要监听其中一个。 我添加了一个包括浏览器前缀的监听器。 你的动画很长并且继续在屏幕外显示，所以它看起来非常古怪，但你得到了一般的想法。 

 $(".downvote").on('click', function() { var href = "http://stackoverflow.com/questions/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: lr-ballerina linear 4s; animation-iteration-count: 1; transform-origin: 50% 50%; animation-fill-mode: forwards; /*when the spec is finished*/ -webkit-animation: lr-ballerina linear 4s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: lr-ballerina linear 4s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: lr-ballerina linear 4s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: lr-ballerina linear 4s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode: forwards; /*IE 10+*/ } @keyframes lr-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 lr-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 lr-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 lr-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 lr-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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery触发CSS3缩放（动画）？ 单击 jQuery 和 CSS3 圆角动画 jquery触发器单击其他元素 jQuery的CSS3动画 jQuery CSS3动画 不同Div悬停时的CSS3动画触发器（JQuery） css3动画不以jquery click事件开头 单击时反转CSS3动画 CSS3动画按钮点击 无论如何将css3过渡动画添加到jQuery事件上的元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM