css - 带有过渡的 CSS 缩放变换忽略剪辑路径

Question

虽然transfom发生了，但clip-path似乎被忽略了：

var zoom = false;

setInterval(function(){

  if(zoom == false) {
    zoom = true;
    $('.circle').attr('class','circle zoom');
  }
  else {
   	$('.circle').attr('class','circle');
    zoom = false;
  }   
},1000);

.wrapper {
  display:inline-block;
  
  -webkit-clip-path: circle(120px at center);
  clip-path: circle(120px at center);
}

.zoom {
  transform: scale(1.1);
}

.circle{
  display:block;
  
  transition: all .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <img src="//placehold.it/300" alt="" class="circle">
</div>

有谁知道这是为什么，以及如何防止这种情况？

Answer 1

将剪辑路径放置到类圈，而不是包装器。

var zoom = false;

setInterval(function(){

  if(zoom == false) {
    zoom = true;
    $('.circle').addClass('zoom');
  }
  else {
   	$('.circle').removeClass('zoom');
    zoom = false;
  }   
},1000);

.zoom {
  transform: scale(1.1);
}

.circle{
  display:block;
  transition: all .2s ease-in-out;
  -webkit-clip-path: circle(120px at center);
  clip-path: circle(120px at center);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/300" alt="" class="circle">