jquery/css：如何在 div 的背景颜色上实现擦除左动画

发布于 2024-12-18 01:48:33 字数 376 浏览 5 评论 0原文

这是我的 css，

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

我希望每当我向 #Slide 添加/删除类 Selected 时，背景颜色属性都会通过从左擦除/从右擦除来实现动画效果。通常，背景颜色只是出现然后消失。如果使用 css 类时这不可行，是否可以使用 jquery .animate() 函数？或者可能是 css3 transition 属性？

有人有什么建议吗

原文

Here's my css

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

I want that whenever I add/remove the class Selected to #Slide, the background-color property is animated by wiping in from left/wiping out to right. Normally, the background-color just appears and disappears. If this is not doable while using css class, is it possible by using jquery .animate() function? or may be css3 transition property?

Any suggestions somebody

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫轩蝶泪 2024-12-25 01:48:34

这是我做的一个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>

Fiddle在这里： http ://jsfiddle.net/LostInDaJungle/da16gx9n/1/

Here's a wipe_left function I did, saw your question when I was looking for my own answer:

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>

Fiddle is here: http://jsfiddle.net/LostInDaJungle/da16gx9n/1/

回复收藏 0 原文

绅士风度i 2024-12-25 01:48:34

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

Codepen 示例

A smooth background wipe effect can be created using CSS pseudo-elements and transitions.

First inject a background pseudo-element into your main container. Then when a class is added to the container, use a transform to move that background out of the way.

#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>

A few small considerations:

The container's rules should include overflow: hidden and position: relative.
Pseudo-elements will stack on top of non-positioned content nodes, so any visible contents of the container will need to be wrapped in a second block element.

Example on Codepen

回复收藏 0 原文