css3动画transform在ie内核动画结束后子元素a标签不能点击(本人未解决,求大神带飞)

问题描述:
css3的动画 animation属性,如果动画里面需要动画的元素是transform,那么动画的这个元素的子元素a标签就不能
点击跳转,也不能运行点击事件,就好像个a标签被透明的东西挡住了一样,目前只是发现这个问题在ie内核的浏览器上面,比如 360浏览器,ie11(考虑到测试css3动画的,没有测试ie789 10.)。而在火狐,谷歌正常。
百度了一大堆,都没有找到好的解决办法,比较接近的一个说法是,transform属性改变了元素的层级,也就是z-index属性,不过在这里a标签好像不是这个原因,希望有大神知道这个解决办法的说明下,多谢了。
解决办法一:(治标不治本,相当于没有解决)
 最后找不到办法,而页面效果只是pc端跑,所以没有办法把原来transform:translate()的属性 统统改成了 margin-left这样去位移,然后就解决了这个问题,不过这样还是不好,因为现在动画只是位移,如果是transform:rotate scale 那岂不是懵逼了...
所以,如果有大神找到怎么解决,求留言啊,求带飞求留言啊,求带飞求留言啊,求带飞求留言啊,求带飞
//下面是例子html
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
   .aniD{
    animation: anid 1s linear forwards; 
    -webkit-animation: anid 1s linear forwards;
   }
  @-webkit-keyframes anid {
    0%{transform: translateX(-200px);}
    100%{transform: translateX(0px);}
  }
@keyframes anid {
  0%{-webkit-transform: translateX(-200px);}
    100%{-webkit-transform: translateX(0px);}
}
</style>
</head>
<body>
 <div class="aniD" style="width:200px;height:200px;background:red;">
 我是左上角的红色div,在ie内核浏览器比如360,ie11,如果我用了css3的transform动画,我的子元素a标签将不能直接点击
 <a href="http://www.baidu.com" target="_blank" style="cursor: pointer;font-size: 14px;display: inline-block;">点击去百度</a>
 </div>
</body>
<script type="text/javascript">
</script>
</html>
 
posted @ 2016-06-15 19:15  fstgshow  阅读(1506)  评论(1编辑  收藏  举报