背景颜色填充动画结束偏移

我想在用户点击它时“填充”一个圆。主要问题是，当动画结束时，它会稍微偏移一点。我试图添加一个margin-top: -1px它，但它的底部然后偏移！背景颜色填充动画结束偏移

我接受任何让动画更平滑的建议，但我的主要问题是：为什么最终结果偏离顶端一小点，我该如何解决它？

#searchOptions label { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    font-weight: 400; 
 
    margin-right: 40px; 
 
} 
 
#searchOptions label .circle { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 2px solid #000; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    margin-right: 12px; 
 
} 
 
#searchOptions label .circle:before { 
 
    display: none; 
 
    position: absolute; 
 
    content: ''; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    width: 2px; 
 
    height: 2px; 
 
} 
 
#searchOptions label .txt { 
 
    position: relative; 
 
    top: -3px; 
 
} 
 
#searchOptions input[type=radio] { 
 
    height: 0; 
 
    width: 0; 
 
    opacity: 0; 
 
} 
 
#searchOptions input[type=radio]:checked + label .circle:before { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: fillRadio ease-in 1s; 
 
} 
 
@-webkit-keyframes fillRadio { 
 
    0% { 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    width: 1%; 
 
    height: 1%; 
 
    } 
 
    100% { 
 
    top: 0%; 
 
    transform: translateY(0%); 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
}

<div id="searchOptions"> 
 
    <input type="radio" name="searchType" value="option1" id="option1" /> 
 
    <label for="option1"><span class="circle"></span> <span class="txt">Option 1</span> 
 
    </label> 
 

 
    <input type="radio" name="searchType" value="option2" id="option2" /> 
 
    <label for="option2"><span class="circle"></span> <span class="txt">Option 2</span> 
 
    </label> 
 
</div> 
 
<!-- id="searchOptions" -->

Here's a JSFiddle如果有人宁愿使用。

来源

2015-10-13 Howdy_McGee

我认为，问题来自15px的50％顶部的dimensiion - >给出一个分数大小

我已经改变了大小16px的，那就是即便：

#searchOptions label { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    font-weight: 400; 
 
    margin-right: 40px; 
 
} 
 
#searchOptions label .circle { 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 2px solid #000; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    margin-right: 12px; 
 
} 
 
#searchOptions label .circle:before { 
 
    display: none; 
 
    position: absolute; 
 
    content: ''; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    width: 2px; 
 
    height: 2px; 
 
} 
 
#searchOptions label .txt { 
 
    position: relative; 
 
    top: -3px; 
 
} 
 
#searchOptions input[type=radio] { 
 
    height: 0; 
 
    width: 0; 
 
    opacity: 0; 
 
} 
 
#searchOptions input[type=radio]:checked + label .circle:before { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: fillRadio ease-in 1s; 
 
} 
 
@-webkit-keyframes fillRadio { 
 
    0% { 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    width: 1%; 
 
    height: 1%; 
 
    } 
 
    100% { 
 
    top: 0%; 
 
    transform: translateY(0%); 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
}

<div id="searchOptions"> 
 
    <input type="radio" name="searchType" value="option1" id="option1" /> 
 
    <label for="option1"><span class="circle"></span> <span class="txt">Option 1</span> 
 
    </label> 
 

 
    <input type="radio" name="searchType" value="option2" id="option2" /> 
 
    <label for="option2"><span class="circle"></span> <span class="txt">Option 2</span> 
 
    </label> 
 
</div> 
 
<!-- id="searchOptions" -->

来源

2015-10-13 20:53:17 vals

就是这样！感谢您指出了这一点 –

背景颜色填充动画结束偏移

回答

相关问题