Question

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

不起作用，因为vanilla jQuery不支持为SVG设置动画fill。但是，css函数确实有效：

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

我想在动画完成后淡出整个svg，但是css没有回调！我被迫基本上用delay函数来破解2秒转换：

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

还有更优雅的方法吗？我不愿意包含一个新的javascript库，只是为了优雅地淡化它。

Answer 1

使用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>

Answer 2

＆＃13;

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

＆＃13;

转换结束时给您回电

动画制作SVG填充色后淡出

2 个答案: