問題描述:
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>