我要实现的是这个动画
动画链接是Material Design
我错过了什么?如何在不对元素使用 position:absolute
的情况下实现上述结果
到目前为止我做了什么
HTML:
<div class="product-list " id="product_list">
<div class="item ">
<a href="#" data-id="228">
<div class="item-top">
<img width="211" height="165" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26">
</div>
<div class="item-bottom">
<div class="item-product-title">Unicity Activate</div>
</div>
</a>
</div>
<div class="item ">
<a href="#" data-id="227">
<div class="item-top">
<img width="165" height="193" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product55_24">
</div>
<div class="item-bottom">
<div class="item-product-title">Lean Complete</div>
</div>
</a>
</div>
<div class="item ">
<a href="#" data-id="223">
<div class="item-top">
<img width="245" height="215" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product44_21">
</div>
<div class="item-bottom">
<div class="item-product-title">Bios Life D</div>
</div>
</a>
</div>
</div>
CSS
#product_list {
right: 0;
left: 0;
text-align: center;
}
.product-list .item {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
-webkit-transition: border-radius 500ms cubic-bezier(0.4, 0, 0.2, 1), width 500ms cubic-bezier(0.4, 0, 0.2, 1), height 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.item-top {
width: 200px;
height: 200px;
}
.item-bottom {
padding: 8px;
line-height: 1.5;
}
Javascript
$('.item').on('click','a',function(e){
e.preventDefault();
var target=$(e.currentTarget);
var par=target.parent();
par.css({width:par.width()+'px',height:par.height()+'px'});
//par.css({height:'300px',width:'500px'});
par.animate({height:'300px'},{"queue": false, "duration":500}).animate({width:'500px'},500,'linear'); par.css({transform:'translate('+0+'px,'+50+'px)scale(1.1,1.1)'});
par.css({'transform-origin':'0,0',zIndex:'9999'});
});
最佳答案
这可能对您有帮助:http://jsfiddle.net/holp/vkgLdv38/1
CSS
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
.product-list { list-style: none; padding: 0 }
.product-list * { font-family: 'Source Sans Pro', sans-serif; }
.product-list li {
width: 200px;
float: left;
margin: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
overflow: hidden;
cursor: pointer;
}
.product-list li div {
width: 200px;
height: 200px;
z-index: 10;
}
.product-list li h3 {
margin: 10px;
z-index: 1;
}
.product-list li p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 10px;
height: 20px;
z-index: 1;
}
.place {
visibility: hidden;
}
HTML
<ul class="product-list">
<li>
<div style="background-color: rgb(246, 255, 118)"></div>
<h3>Pinapple</h3>
<p>Pellentesque mattis vestibulum semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ullamcorper lorem lacus, a mattis nibh scelerisque in. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>
<li>
<div style="background-color: rgb(167, 143, 212)"></div>
<h3>Grape</h3>
<p>Curabitur ullamcorper, nibh ac faucibus varius, felis nisl lacinia tellus, a mattis tellus augue in urna. Phasellus ac ornare nisi. Aliquam aliquet facilisis vulputate. Nullam accumsan orci quis lorem cursus, at luctus mauris sagittis.</p>
</li>
<li>
<div style="background-color: rgb(128, 177, 211)"></div>
<h3>Blueberry</h3>
<p>Mauris quis pharetra nunc. Nulla pretium diam eros, nec congue diam tempor sed. Quisque hendrerit risus a augue ultrices imperdiet. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>
<li>
<div style="background-color: rgb(224, 141, 170)"></div>
<h3>Strawberry</h3>
<p>Aliquam a semper orci. Integer dictum lacus a tellus porta hendrerit. Mauris vel est pretium, gravida eros quis, dignissim massa. Integer mollis vitae enim sit amet mattis. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.</p>
</li>
</ul>
JS
chosen = null;
$('li').click(function() {
var object = $(this);
var margin = object.css('margin').replace(/[^-\d\.]/g, '');
var scroll = $(window).scrollTop();
if (chosen == null) {
var ft = ($(window).height() / 2) - (300 / 2) - margin; var fl = ($(window).width() / 2) - (600 / 2) - margin;
$('.product-list li').not(this).css('cursor','default');
object.clone().insertAfter(object).addClass('place');
object.css({'position':'fixed','top': object.offset().top - margin - scroll,'left': object.offset().left - margin}).animate({'top':ft, 'left':fl,'width':'600px','height':'300px'});
object.children('div').animate({'width':'300px','height':'300px'});
setTimeout( function(){
object.children('div').css({'position':'absolute','top':'0','left':'0'});
object.children('h3').css({'position':'absolute','top':'0','left':'0'}).animate({'left':'300px'});
object.children('p').css({'position':'absolute','top':'40px','left':'0','white-space':'normal','width':'280px','height':'240px'}).animate({'left':'300px'});
},300);
chosen = this;
} else if (chosen == this) {
var ph = $('.place'); var pht = ph.offset().top - margin - scroll; var phl = ph.offset().left - margin; var phw = ph.width(); var phh = ph.height();
object.children('p').animate({'left':'0'});
object.children('h3').animate({'left':'0'});
setTimeout( function(){
object.children('p').removeAttr('style');
object.children('h3').removeAttr('style');
object.children('div').css({'position':'','top':'','left':''}).animate({'width':'200px','height':'200px'});
object.animate({'top':pht, 'left':phl,'width':phw,'height':phh});
setTimeout( function(){
object.children('p').removeAttr('style');
object.children('h3').removeAttr('style');
object.children('div').css({'width':'','height':'','left':''});
ph.remove();
object.removeAttr('style');
$('.product-list li').not(this).css('cursor','');
chosen = null;
},500);
},300);
}
});
关于jquery - Css 和 Jquery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25334820/