我在 svg 圓上有脈沖動畫，但transform: scale圓在 IE/Edge 上不起作用。在其他瀏覽器上運行良好。有沒有什么方法可以在不使用 jquery 插件的情況下解決這個問題？ .cls-1, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8 { transform: scale(0,0); -ms-transform: scale(0,0); -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -o-transform:scale(0,0); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: pulse 2s infinite cubic-bezier(.5,.5,0,1); }@keyframes pulse { 25% { opacity: 0.4; } 100% { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform:scale(1); }}代碼筆： https: //codepen.io/burianovata/pen/oNjxqom
1 回答
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
解決方案是使用 JQuery 更改圓半徑。在所有瀏覽器上的工作方式相同，不需要額外的插件。我還嘗試了 GSAP3 - 存在變換原點問題，以及 Snap.svg - 盡管它也會影響半徑屬性，但它在 IE/Edge 上不起作用。示例位于上面列出的 Codepen 鏈接上。
//Change radius to zero
function scale() {
if($('.map-circle').length) {
$('.map-circle')
.animate(
{'radius': 0},
{
step: function (radius) {
$(this).attr('r', radius);
},
duration: 800
}
);
}
}
//Change radius to initial size - 35.5
function pulse() {
if($('.map-circle').length) {
$('.map-circle')
.animate(
{'radius': 35.5},
{
step: function (radius) {
$(this).attr('r', radius);
},
duration: 1200
}
);
}
}
// Infinite animation
function animation() {
setInterval(
function () {
pulse();
scale();
}, 1000);
}
animation();
- 1 回答
- 0 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消