我一直在测试使用 CSS 过渡和 jQuery 的动画。这个想法是向用户显示一组可点击的 div 以加载新页面。单击 div 后,它会展开以填满整个屏幕并“加载”下一页。
下面是我想要实现的模型:
我设置它的方式是让每个 div 相对定位并向左浮动以彼此相邻。然后,一旦单击一个 div,我就会“淡出”div,将未单击的 div 分开并展开单击的 div。问题是,当点击的不是第一个(即蓝色或绿色)时,它最终会在展开之前“捕捉”到左侧。当然会发生这种情况,因为定位设置为相对。
position: relative;
可以在这里看到这个例子:http://codepen.io/anon/pen/eKynL
为了解决这个问题,我设置了具有绝对定位的 div。动画效果如我所愿,但我不喜欢这样一个事实:由于绝对定位,我必须分别定位每个 div 的左侧和顶部,而且在调整窗口大小时,div 不会自动移动到新行。
position: absolute;
可以在这里看到这个例子:http://codepen.io/anon/pen/jIqcL
我不确定是否有任何方法可以更改我的实现以改进它并使其更易于维护(特别是 div 的内联样式)。
最佳答案
我使用了你的 position:relative;
( 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>
代码笔: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').not('.clicked').addClass('hide');
并在 setTimeout 函数中添加了这一行:
$('.mydiv').not('.clicked').css('display','none');
它的工作原理如下:
- 在点击的
div
获取.animate
类的同时,未点击的div
获取。隐藏
类。 - 现在,当被点击的
div
动画填充页面时,其他div
动画消失(使用width
/高度
和不透明度
)。- 所有
div
的width
/height
以相同的速度转换,因此随着被点击的div
的增长,其他div
收缩,点击的div
不会对齐到左侧/顶部。 - 未单击的
divs
的opacity
转换得更快 (0.25s) 以创建与原始代码笔中(看似)相同的结果(即不-点击的 div 在点击的 div 展开之前消失)。
- 所有
- 最后(在setTimeout-function中),对于未点击的
div
,display
设置为none
,完成手动淡出。
关于jquery - CSS/jQuery 动画定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26555481/