動畫後SVG填充顏色淡出

我試圖做一個簡單的svg複選框的動畫。動畫後SVG填充顏色淡出

<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/> 
    <path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> 
</svg>

這是一個圓圈，裏面有一個複選框。我正在嘗試爲圈子的「填充」屬性製作動畫。 Searching stack overflow告訴我，

$('.circle').on("click", function() { 
    $(this).animate({fill : 'green'}); 
});

不會起作用，因爲香草jQuery的不支持SVGs動畫fill。然而，css功能不工作：

$('.circle').on("click", function() { 
    $(this).css({fill : 'green', transition: "2.0s"}); 
});

我想淡出整個SVG出來的動畫完成後，但css沒有回調！我被迫繞2秒過渡到基本破解與delay功能：

$('.circle').on("click", function() { 
    $(this).css({fill : 'green', transition: "2.0s"}); 
    $(".checkbox").delay(2000).fadeOut('fast'); 
});

有沒有更優雅的方式來做到這一點？我不願意包含一個新的JavaScript庫，僅僅是爲了淡化這個優雅的目的。

來源

2017-06-14 Mike Flynn

下面是一個更優雅的方式使用transitionend時給你回電話：

function fillGreen() { 
 
    $(this).css({fill : 'green', transition: "2.0s"}); 
 
} 
 

 
function fadeoutCheckbox() { 
 
    $(".checkbox").fadeOut('fast'); 
 
} 
 

 
$('.circle') 
 
    .one('click', fillGreen) 
 
    .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', fadeoutCheckbox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/> 
 
    <path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> 
 
</svg>

來源

2017-06-14 23:45:35

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

轉變結束

來源

2017-06-14 23:43:44

動畫後SVG填充顏色淡出

回答

相關問題