CSS / jQuery动画定位问题

2023年2月11日 160次阅读

我一直在使用CSS过渡和jQuery测试动画.这个想法是为用户显示一组可点击的div来加载新页面.单击div后,它将展开以填充整个屏幕并“加载”下一页.

下面是我想要实现的模型：

我设置它的方法是让每个div相对定位并向左浮动以便彼此相邻.然后,一旦div被点击,我’淡出’divs分开没有点击的那个并展开点击的div.问题是,当点击div不是第一个(即蓝色或绿色)时,它会在扩展之前最终“捕捉”到左侧.当然,这将发生,因为定位设置为相对.

position: relative;

这方面的例子可以在这里看到：http://codepen.io/anon/pen/eKynL

为了解决这个问题,我设置了具有绝对定位的div.动画完全按照我的意愿运行,但是我不喜欢这样的事实,即由于绝对定位,我必须分别定位每个div的左边和顶部加上div在调整窗口大小时不会自动移动到新行.

position: absolute;

这方面的例子可以在这里看到：http://codepen.io/anon/pen/jIqcL

我不确定是否有任何方法可以改变我的实现来改进它并使其更易于维护(特别是div的内联样式).

最佳答案 我用你的位置：亲戚; (
http://codepen.io/anon/pen/eKynL)作为来源：

$(document).ready(function() {
  $('.mydiv').click(function() {
    if(!$(this).hasClass('clicked')) {
      var clicked_div = $(this);
      clicked_div.addClass('clicked');
      clicked_div.find('h1').fadeOut(150);

      $('.mydiv').not('.clicked').addClass('hide'); //<----CHANGED LINE
      clicked_div.addClass('animate');

      $('.loading').css('opacity', 1);

      setTimeout(function() {
        $('.mydiv').not('.clicked').css('display','none'); //<----NEW LINE
        $('.loading').css('opacity', 0);
        clicked_div.addClass('blog-post');
        clicked_div.find('h1').fadeIn(150);
        $('.blog-content').addClass('active');
      }, 1500);
    }
  });
});
*,*:before,*:after {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.mydiv {
  width: 200px;
  height: 200px;
  background-color: #bada55;
  position: relative;
  float: left;
  left: 0;
  top: 0;
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, opacity 0.25s; /*<----ADDED 'opacity'*/
}
.mydiv h1 {
  position: absolute;
  bottom: 0;
  left: 10px;
  color: #fff;
  font-family: sans-serif;
}
.teal {
  background-color: teal;
}
.orange {
  background-color: orange;
}

/*-----NEW CODE---------------------------------*/
.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}
/*----------------------------------------------*/

.mydiv.animate {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.mydiv.blog-post {
  width: 50%;
}

.blog-content {
  background-color: #efefef;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top 0.5s;
  font-family: sans-serif;
  color: #3c3c3c;
  font-size: 30px;
  padding: 20px;
}

.blog-content.active {
  top: 0%;
}

.loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  width: 100%;
  height: 100px;
  text-align: center;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="mydiv">
  <h1>Green</h1>
</div>
<div class="mydiv teal">
  <h1>Teal</h1>
</div>
<div class="mydiv orange">
  <h1>Orange</h1>
</div>

<div class="loading">Loading...</div>
<div class="blog-content">
  Content
</div>

codepen：http://codepen.io/anon/pen/lFIhH

在CSS中,我只添加了这个：

.mydiv {
  ...
  transition: ..., opacity 0.25s;
}

.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}

在JS中,

我更改了这一行：
$(‘.mydiv’).not(‘.clicked’).fadeOut(150,function(){
至
$( ‘mydiv ‘)不是(‘ 点击 ‘)addClass(‘ 隐藏’).;

并在setTimeout函数中添加了这一行：

$( ‘mydiv ‘)不(‘ 点击 ‘)的CSS(‘ 显示’, ‘无’).;

它的工作原理如下：

>在点击的div获得.animate-class的同时,未单击的div获得.hide-class.
>现在,当点击的div动画来填充页面时,其他div正在动画消失(使用宽度/高度和不透明度).

>所有div的宽度/高度以相同的速度转换,因此当单击的div增长时,其他div会缩小,并且单击的div不会捕捉到左/上.
>未单击的div的不透明度转换速度稍快(0.25s),以创建(看似)与原始codepen中相同的结果(即未单击的div在单击的div展开之前消失).

>最后(在setTimeout-function中),对于未单击的div,display设置为none,以完成手动淡出.

点赞