在动画SVG填充颜色后淡出

I'm trying to do an animation of a simple svg checkbox.

我正在尝试制作一个简单的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>

This is a circle, with a checkbox inside it. I'm trying to animate the 'fill' property of the circle. Searching stack overflow tells me that

这是一个圆，里面有一个复选框。我试着让这个圆圈的“填充”属性产生动画效果。搜索堆栈溢出告诉我

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

will not work because vanilla jQuery does not support animating fill for SVGs. However, the css function does work:

不会工作，因为普通的jQuery不支持SVGs的动画填充。然而，css功能确实有效:

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

I want to fade the entire svg out after the animation is completed, but css has no callback! I'm forced to basically hack around the 2 second transition with the delay function:

我想在动画完成后将整个svg淡出，但是css没有回调!我不得不利用延迟函数来破解2秒过渡:

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

Is there any more graceful way to do this? I'm reluctant to include a new javascript library just for the purpose of fading this out elegantly.

还有更优雅的方式吗?我不愿意仅仅为了优雅地消除它而包含一个新的javascript库。

2 个解决方案

#1

Here is a more elegant approach using transitionend:

这里有一个更优雅的方法，它使用了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>

#2

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

Gives you a call back when the transition end

当过渡结束时给你回个电话。

#1