这是我的CSS
#Slide {
background: none;
height: 30px;
width: 140px;
}
#Slide.Selected {
background: #ff0;
}
我希望每当我将类添加/删除Selected到#Slide时，背景颜色属性都会通过从左向右擦除/擦除来进行动画处理。通常，背景色只是出现和消失。如果在使用 css 类时这不可行，是否可以使用 jquery.animate()函数？或者可能是css3transition属性？
任何建议有人
您不能使用 jQuery 或 CSS3 动画对背景颜色进行擦除动画。
要获得这种视觉效果，您有几个选择。您可以对位于现有元素后面的整个单独元素进行擦除过渡，以便模拟背景。或者，您可以使用所需颜色和大小的背景图像，并为背景位置设置动画以模拟擦除。
这是我做的一个wipe_left函数，在我寻找自己的答案时看到了你的问题：
wipe_left($('.wipe-left'), $('.wipe-left').css('width'));
function wipe_left (elem, width) {
elem.css('width', '0px');
elem.css("left", width);
elem.animate({
width: width,
left: '0px'
}, 5000);
}
<div class="wipe-left" style="position: relative; top: 0; left: 0; background-color: lightblue; width: 300px; height: 200px;">
</div>
小提琴在这里：http: //jsfiddle.net/LostInDaJungle/da16gx9n/1/
可以使用 CSS 伪元素和过渡创建平滑的背景擦除效果。
首先将背景伪元素注入主容器。然后，当一个类被添加到容器中时，使用变换将背景移开。
#slide:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transition: transform 1s ease-in-out;
background: teal;
}
#slide.on:before {
transform: translateX(100%);
}
$("#slide").on("click", function() {
$(this).toggleClass("on");
});#slide {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background: salmon;
}
#slide .contents {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
#slide:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transition: transform 1s ease-in-out;
background: teal;
}
#slide.on:before {
transform: translateX(100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide">
<div class="contents">Click me!</div>
</div>几个小考虑：
overflow: hidden和position: relative。