Css和Jquery动画
我想要实现的是这个动画
链接到动画是Material Design
我缺少什么？如何在不使用position:absolute情况下实现上述结果
到目前为止我做了什么
HTML：
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
-
Pinapple
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.
-
Grape
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.
-
Blueberry
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.
-
Strawberry
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.
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); } });
我做了这个 jsfiddle
它可能不是最漂亮的代码，但它完全符合您的要求。 如果要添加更多可扩展框，只需在jquery中更改img动画的左侧属性即可。 我会让它变得完美，但是这会花费我更多的时间。 你可以随心所欲地玩它。
HTML
CSS
#product_list { text-align: center; position:relative; width:100%; margin:0px; padding:0px; } .tr { position:relative; margin:0px; border: 5px solid transparent; } .product-list .item { position: absolute; border-radius: 3px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16); } .item-top img { width: 200px; height: 200px; } .item-bottom { padding: 8px; } .item-bottom .item-product-title { text-align:left; } .item a { color:black; text-decoration:none; background-color:blue; }
JS
var myPadding = 10; var myWidth = 0 - myPadding; var myHeight = 0; var numRows = $(".tr").length; var allItemHeights = []; var allItemWidths = []; var allItemLefts = []; var allItemsTextLefts = []; var allItemsTextTops = []; var parentBorderWidth = parseInt($(".tr").css("border-left-width"), 10); for (var j = 0; j < numRows; j++) { var numItems = $(".tr:eq(" + j + ") .item").length; var parentPositionLeft = $(".tr:eq(" + j + ")").offset().left; for (var i = 0; i < numItems; i++) { var itemWidth = $(".item:eq(" + i + ")").outerWidth(); $(".item:eq(" + i + ")").css({ left: myWidth + parentPositionLeft + "px" }); myWidth = myWidth + itemWidth + myPadding; thisHeight = $(".item:eq(" + i + ")").outerHeight(); allItemHeights.push($(".item:eq(" + i + ")").height()); allItemWidths.push($(".item:eq(" + i + ")").width()); allItemLefts.push(parseInt($(".item:eq(" + i + ")").css("left"), 10)); allItemsTextLefts.push($(".item:eq(" + i + ") .item-bottom").position().left); allItemsTextTops.push($(".item:eq(" + i + ") .item-bottom").position().top); if (thisHeight > myHeight) { myHeight = thisHeight; } } $(".tr:eq(" + j + ")").css({ width: myWidth + "px", height: myHeight + "px" }); } var openItem = false; $('.item').click(function () { var par = $(this); var eq = $(".item").index(this); var left = allItemLefts[eq]; var textLeft = allItemsTextLefts[eq]; var textTop = allItemsTextTops[eq]; if (!openItem) { par.css({ zIndex: '9999' }); par.animate({ height: '300px', width: myWidth + 5 + 'px', left: -parentBorderWidth + "px" }, 500); $(".item:eq(" + eq + ") img").animate({ "margin-left": -((myWidth / 2) + parentBorderWidth + myPadding) + "px", height: 300 + "px", width: 300 + "px" }, 500); $(".item:eq(" + eq + ") .item-bottom").css({ position: "absolute", left: textLeft + "px", top: textTop + "px" }); $(".item:eq(" + eq + ") .item-bottom").animate({ left: 300 + 20 + "px", top: 20 + "px" }, 500); openItem = true; } else { par.animate({ height: allItemHeights[eq] + 'px', width: allItemWidths[eq] + 'px', left: left + "px" }, 500, function () { par.css({ zIndex: '0' }); }); $(".item:eq(" + eq + ") img").animate({ "margin-left": 0 + "px", height: 200 + "px", width: 200 + "px" }, 500); $(".item:eq(" + eq + ") .item-bottom").animate({ left: textLeft + "px", top: textTop + "px" }, 500); openItem = false; } });