程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

CSS过渡可在隐藏另一个元素之后平滑过渡到元素。

发布于2021-04-06 12:45     阅读(1021)     评论(0)     点赞(3)     收藏(0)


问题:我可以使用CSS过渡来控制div如何移动到由另一个div隐藏的空位中。

我的应用程序中有一些元素会根据用户设置的时间间隔显示和消失(显示:无)。与display:none预期的一样,有时相邻元素将移动以占据腾出的空间。

我不介意这种情况下的动作。我想控制如何它的动作。我想要的是通过css过渡或其他方法移动,而不仅仅是跳进原位。这可能吗?

这是一个JS小提琴,它通过单击按钮说明了这种情况。当#red隐藏时,我希望#blue逐渐移到位置。谢谢。

http://jsfiddle.net/uV6W7/1/

这是jsfiddle中的代码:

的HTML

<div id="red"></div>
<div id="blue"></div>
<p>
<button id="remove" type="button">Remove Red</button>

的CSS

#red {
    display: inline-block;
    background-color: red;
    height: 200px;
    width: 200px;
}
#blue {
    display: inline-block;
    background-color: blue;
    height: 200px;
    width: 200px;
}

Java脚本

$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});

解决方案


您可以通过将红色滑动到0宽度状态来隐藏红色。这将导致右边的元素似乎滑入左边的位置。

$('#red').animate({width:'toggle'}); 可用于将其向左滑动。

您还可以将其包裹#red在另一个div中,然后淡入淡出#red,然后滑动容器以结合视觉效果。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/53777/b882e55db700c4a665a9/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

3 0
收藏该文
已收藏

评论内容:(最多支持255个字符)