动画后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填充颜色淡出

回答

相关问题