Question

我有一个扩展和收缩的圆圈，但是大约10px - 20px有一个小故障。仔细看，你会发现它“抽搐”。

就好像圆圈有一些分配的空间，然后“打破”它。

$A.Class.create('test',{
    Name: 'Animator',
    E: {
        timer: '#timer'
    },
    init: function(){
        this.animate();
    },
    animate: function(){
        var s = this.E.timer.style;
        var step = 2;
        var state = 'up';
        $A.setInterval(function(){
            $A.log(step);
            s.height = s.width = step + 'px';
            s.borderRadius = step/2 + 'px';
            if(state === 'up') {
                step += 2;
            }
            if(state === 'down') {
                step -= 2;
            }
            if(step === 2) {
                state = 'up';
            }
            if(step === 42){
                state = 'down';
            }
        }, 200);
    } 
});

我试着在这里明确地给它空间：

https://jsfiddle.net/nj2u9bhy/5/

但效果相同。

Answer 1

那是因为它是一个内联块元素，它垂直对齐到底部，所以给它垂直对齐顶部解决问题，或者将它改为块元素。

Updated fiddle

#timer{
  position: relative;
  top: 20px;
  left: 20px;
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: top;
  background-color: black;
  border-radius: 16px;
}

可以使用CSS动画轻松完成，这样可以实现更平滑的过渡（请注意，IE 9及更早版本不支持CSS动画）

＆＃13;

#timer{
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  background-color: black;
  border-radius: 50%;
  animation: zoom 3s linear infinite;
}
@keyframes zoom {
  0% {width: 0; height: 0;}
  50% {width: 32px; height: 32px;}
  100% {width: 0; height: 0;}
}

＆＃13;

<div id="timer">
</div>

＆＃13;

为什么这个动画不统一？

1 个答案: