Jquery /css:如何实现一个擦左动画的背景颜色的div

Question

这是我的css

#Slide {
    background: none;
    height: 30px;
    width: 140px;
}
#Slide.Selected {
    background: #ff0;
}

我希望每当我添加/删除类Selected到#Slide时，background-color属性都是通过从左/右擦除来动画的。通常情况下，背景色只是出现和消失。如果这是不可行的，而使用css类，是否可以使用jquery .animate()函数?或者可能是css3的transition性质?

谁有什么建议

Answer 1

你不能使用jQuery或CSS3动画在背景颜色上做擦除动画。

要获得这种视觉效果，您有几个选项。您可以对位于现有元素后面的整个独立元素进行擦除过渡，这样它就可以模拟背景。或者，您可以使用所需颜色和大小的背景图像，并将背景位置动画化以模拟擦除。

Answer 2

这是我做的一个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;">
        &nbsp;
</div>

小提琴在这里:http://jsfiddle.net/LostInDaJungle/da16gx9n/1/

Answer 3

可以使用CSS伪元素和过渡来创建平滑的背景擦除效果。

首先在你的主容器中注入一个background伪元素。然后，当一个类被添加到容器中时，使用转换将背景移开。

#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。
• 伪元素将堆叠在非定位内容节点的顶部，因此容器的任何可见内容都需要被第二个块元素包裹。

Codepen示例