CSS3动画触发与JQuery点击到其他元素

CSS 前端之家
前端之家收集整理的这篇文章主要介绍了CSS3动画触发与JQuery点击到其他元素，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我的Rails应用程序中有一个类似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,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',style: "margin-right: 0; margin-left: 0" %></div>
  <% end %>
</div>

最后,我的应用程序文件中我的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 …一个坏的组合.

添加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="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,因此它是可见的…

解决方法

我不是很确定我理解你的问题,但是你期待这样的事情吗？ 
$(".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+,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>

猜你在找的CSS相关文章

IE浏览器兼容性调整总结技巧
前言 最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个...
css属性总结
前言 有些属性不是很常用，但是工作中遇到了，记录一下，方便学习。 1、text-indent text-...
政府网站公祭日，如何使网站整体变灰
前言 政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决...
css实现图片动画效果
需求 项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。 实现...
css实现文字渐变
html代码 css代码 效果图
移动端rem距离单位的使用
在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的...
使用 media 实现响应式布局
最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下...
教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜
因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看...
CSS盒模型之内边距、边框、外边距 十九问 （持续更新）
本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考...
轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作