请老师帮忙看一下

其他没有问题，但只要设置动画效果为slideupdown，加载成功后的高度就是加载时的120px,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="dropdown dropdown-shopping" data-active="shopping">
<div class="dropdown-toggle">
<i class="font icon-cart"></i>
<span class="des">购物车</span>
<span class="item-num"></span>
<i class="font icon-dropdown"></i>
</div>
<div class="dropdown-layer">
<div class="loading"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/shoppingCart.js"></script>
<script type="text/javascript">
(function($){
$(".dropdown-shopping").dropdown({
css3:true,
js:false,
animation:"slideUpDown",
active:"shopping",
event:"hover"
}).shoppingCart("js/shoppingItem.json");

})(jQuery);
</script>
</body>
</html>

@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot?t=1567844842172'); /* IE9 */
src: url('../font/iconfont.eot?t=1567844842172#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABxgAAALVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBfIFfATYCJAMMCwgABCAFhG0HORsoBsgOJaHAwIB5AGBgBF/7ofvu7kMIFaJMNKBMFKCMyvj4OGqrqlR9hayuMGzE/1//6u9CzrICWREPyZuMMieTVbf+AFqBy+7/X9GdDLgc/39ZFsg8oJzW3tTGAOOAAt0D22QFEmEC3jB2wQs8TaDXjEQ2R9WNLeCssCcF4olqEjgXQorCsq1QN6wsEF84aNOK9BjA5+jz8R/SwxkkVQb7rPPHKhVKf+W/uZDHujE9edzYcg6wdWRsAYV4aExdsROMaadXZd9dXCtCWira/ScSGYra+cMjCaIGu7IfrKF04le+J8rUF6DkqU/KoEbBKXDBZoz7hSGPRri7s5WBZOuuQ6sCWtu3rTow5q9u1rYEeOz7Eda962iCZ5sr9E24drYcXsrysvFc+TWo49xC1N757NOz4XvmTHg+PPdYnp2XNz7By7/8+Pxje3AsKN6duHg12zC78e/Jswfls69y5dOdOmpz6aVucl10zZ3x+0bn3Hh7PPvYw/3x7OzlqQjXCNfN2uuzj909HsMAe2xetI0F6PYUe7vxH/0d3/JOTPd7Ff52drMH+Lnj9UMkGVYOWonB4t/aVIDuT7HnUtuciybyRJYn27lFRwIKuFcHtm/Uy+m6iVvPhNZEhqQxjay1RBT6Fip9tlFr7aLXppr1fcZwdqK4ABumAcKwY0gGfUc27AlR6C9QmfQZteGwQ6+L8Nuxz0pQ1wqOJYFVJI8iqjAzca3CNa5uwtqgUeJ5acRqw9xKoygtObWcrcFmzJeYYx3S0oUgiHBmQtXgPGw0MmThTI8VkawTwpKfkkKaXpSsMBO4OsRhEgFTIbJRCKVgzEjQW3CtvL8JphlkJOEdHXX+NhhnRQdH0iRLHUDUqMyDOh7lEqshmnSCQCAEx5gg1WAYZmTEIJbmYXqYQkimm5CwyJfidCNDVcnba0z/tw962QfnsLWxs7GH6plKRslJokmKxAUAAAAA') format('woff2'),
url('../font/iconfont.woff?t=1567844842172') format('woff'),
url('../font/iconfont.ttf?t=1567844842172') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1567844842172#iconfont') format('svg'); /* iOS 4.1- */
}
.font {
font-family: "iconfont" !important;
font-size: 12px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*{
margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
/*下拉菜单公共样式*/
.dropdown{
position: relative;
}
.dropdown-toggle{
display: inline-block;
height: 100%;
position: relative;
}
.dropdown-toggle:hover{
cursor: pointer;
}
.dropdown-layer{
display: none;
position: absolute;
z-index:1;
overflow: hidden;
}
.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.transition{
-webkit-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
/*dropdown-shopping*/
.dropdown-shopping{
width: 158px;
height:42px;
line-height: 42px;
background: #f01414;
color:#fff;
font-size: 12px;
}
.dropdown-shopping .dropdown-layer{
width:320px;
box-shadow: 0 5px 5px #e9e9e9;
border:1px solid #cdd0d4;
}
.dropdown-shopping .dropdown-layer .loading{
height:120px;
background:url(../img/cart/loading.gif) no-repeat center center;
}
.dropdown-shopping .dropdown-layer.empty{
height:120px;
background:url(../img/cart/cartEmpty.png) no-repeat 40px center;
}
.dropdown-shopping .dropdown-layer.empty::after{
display: inline-block;
content:"购物车里还没有商品赶紧去选购吧！";
color:#cdd0d4;
height: 80px;
line-height: 20px;
width: 120px;
vertical-align: middle;
position: absolute;
left:95px;
padding-top: 40px;
}
.dropdown-shopping .icon-cart,
.dropdown-shopping .des
{
padding-left:15px;
}
.dropdown-shopping .des{
padding-right:14px;
border-right:1px solid #fff;
}
.dropdown-shopping .itemsNum{
padding-left: 14px;
}
.dropdown-shopping .icon-dropdown{
margin-left: 7px;
display: inline-block;
width: 13px;
height: 13px;
line-height: 13px;
-webkit-transition: transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
}
.shopping-active .icon-dropdown{
transform: rotate(180deg);
}
.dropdown-shopping.shopping-active{
background: #fff;
color:#f01414;
box-shadow: 0 0 5px #e9e9e9;
}
.dropdown-shopping.shopping-active .des{
border-color:#f01414;
}
.shopping-item-title{
height:52px;
line-height: 52px;
text-indent: 24px;
color:#000;
}
.shopping-item-wrap{
max-height: 326px;
overflow-y: scroll;
}
.shopping-item{
height: 64px;
line-height: 64px;
margin:0 12px;
border-top:1px solid #d9dde1;
color:#4d555d!important;
}
.shopping-item:last-child{
border-bottom: 1px solid #d9dde1;
}
.shopping-item img{
vertical-align: middle;
}
.shopping-item>.info{
float: left;
}
.shopping-item>.info:nth-child(2){
margin-left: 15px;
height: 100%;
}
.shopping-item>.info:nth-child(2) .item-name{
margin-top: 12px;
line-height: 22px;
max-width: 190px;
}
.shopping-item>.info:nth-child(2) a:link,
.shopping-item>.info:nth-child(2) a:visited{
color:#4d555d;
}
.shopping-item>.info:nth-child(2) a:hover{
color:#f01414;
}
.shopping-item>.info:nth-child(2) .item-price{
line-height: 22px;
font-weight: bold;
max-width: 190px;
}
.shopping-item>.info:last-child{
font-size: 16px;
float: right;
margin-right: 10px;
}
.shopping-item>.info:last-child:hover{
color:#f01414;
cursor: pointer;
}
.shopping-item-bottom{
height:68px;
line-height: 68px;
}
.total-items-num{
margin-left: 24px;
color:#000;
}
.total-price{
margin-left: 12px;
color:#000;
}
.shopping-button{
display: inline-block;
width: 80px;
height:36px;
line-height: 36px;
color:#fff;
background-color: #f01414;
text-align: center;
margin-left: 48px;
border-radius: 2px;
}
.fadeout{
visibility: none!important;
opacity: 0!important;
}
.slideUpDownCollapse{
height:0!important;
padding-top:0!important;
padding-bottom:0!important;
}
.slideLeftRightCollapse{
width:0!important;
padding-left:0!important;
padding-right:0!important;
}

[{
"name":"adidas 阿迪达斯训练男子",
"price":335,
"num":1,
"link":"###",
"img":"./img/cart/1.png"
},
{
"name":"玉兰油多效修护三部曲套装",
"price":199,
"num":2,
"link":"###",
"img":"./img/cart/2.png"
},
{
"name":"Apple iPhone 7(A1660)",
"price":6188,
"num":1,
"link":"###",
"img":"./img/cart/3.png"
},
{
"name":"飞利浦面条机 HR2356/31",
"price":659,
"num":4,
"link":"###",
"img":"./img/cart/4.png"
},
{
"name":"罗技G29 力反馈游戏方向",
"price":2999,
"num":1,
"link":"###",
"img":"./img/cart/5.png"
},
{
"name":"编译原理",
"price":99,
"num":1,
"link":"###",
"img":"./img/cart/6.png"
}
]

//判断transition的兼容性
(function(){
var transitionEndName={
"transiton":"transitionend",
"MozTransition":"transitionend",
"webkitTransition":"webkitTransitionEnd",
"oTransition":"oTransitionEnd otransitionend",
};
var transitionEnd="",
isSupport=false;
for(var name in transitionEndName){
if(document.body.style[name]!==undefined){
transitionEnd=transitionEndName[name];
isSupport=true;
break;
}
}
window.mt=window.mt||{};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})();

// showhide.js
(function($){

var transition=window.mt.transition;
function init($elem,hiddenCallback){
if($elem.is(':hidden')){
$elem.data("status","hidden");
if(typeof hiddenCallback==="function"){
hiddenCallback();
}
}
else{
$elem.data("status","shown");
}
}
function show($elem,callback){
if($elem.status==="show"||$elem.status==="shown")return;
$elem.trigger("show").data("status","show");
callback();
}
function hide($elem,callback){
if($elem.status==="hiden"||$elem.status==="hidden")return;
$elem.trigger("hide").data("status","hide");
callback();
}
var silent={
init:function($elem){
init($elem);
},
show:function($elem){
show($elem,function(){
$elem.addClass($elem.data("active")+"-active").show();
$elem.trigger("shown").data("status","shown");
});
},
hide:function($elem){
hide($elem,function(){
$elem.removeClass($elem.data("active")+"-active").hide();
$elem.trigger("hidden").data("status","hidden");
})
}
};
//使用css3动画
var css3={
fade:{
init:function($elem){
css3._init($elem,"fadeout");
},
show:function($elem){
css3._show($elem,"fadeout");
},
hide:function($elem){
css3._hide($elem,"fadeout");
}
},
slideUpDown:{
init:function($elem){
$elem.height($elem.height());
css3._init($elem,"slideUpDownCollapse");
},
show:function($elem){
css3._show($elem,"slideUpDownCollapse");
},
hide:function($elem){
css3._hide($elem,"slideUpDownCollapse");
}
},
slideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,"slideLeftRightCollapse");
},
show:function($elem){
css3._show($elem,"slideLeftRightCollapse");
},
hide:function($elem){
css3._hide($elem,"slideLeftRightCollapse");
}
},
fadeSlideUpDown:{
init:function($elem){
$elem.height($elem.height());
css3._init($elem,"fadeout slideUpDownCollapse");
},
show:function($elem){
css3._show($elem,"fadeout slideUpDownCollapse");
},
hide:function($elem){
css3._hide($elem,"fadeout slideUpDownCollapse");
}
},
fadeSlideLeftRight:{
init:function($elem){
$elem.width($elem.width());
css3._init($elem,"fadeout slideLeftRightCollapse");
},
show:function($elem){
css3._show($elem,"fadeout slideLeftRightCollapse");
},
hide:function($elem){
css3._hide($elem,"fadeout slideLeftRightCollapse");
}
}
};
css3._init=function($elem,className){
$elem.addClass("transition");
init($elem,function(){$elem.addClass(className);});
};
css3._show=function($elem,className){
show($elem,function(){
$elem.off(transition.end).one(transition.end,function(){
$elem.data("status","shown").trigger("shown");
});
$elem.show();
setTimeout(function(){//必须让元素先display:block之后才能通过transiton改变它的样式
$elem.removeClass(className);
},20);
});
};
css3._hide=function($elem,className){
hide($elem,function(){
$elem.addClass(className);
$elem.off(transition.end).one(transition.end,function(){
$elem.hide();
$elem.data("status","hidden").trigger("hidden");
});
});
}
//使用js方式的动画
var js={
fade:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,"fadeIn");
},
hide:function($elem){
js._hide($elem,"fadeOut");
}
},
slideUpDown:{
init:function($elem){
js._init($elem);
},
show:function($elem){
js._show($elem,"slideDown");
},
hide:function($elem){
js._hide($elem,"slideUp");
}
},
slideLeftRight:{
init:function($elem){
js._customInit($elem,{
"width":0,
"padding-left":0,
"padding-right":0
});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"width":0,
"padding-left":0,
"padding-right":0
});
}
},
fadeSlideUpDown:{
init:function($elem){
js._customInit($elem,{
"opacity":0,
"height":0,
"padding-top":0,
"padding-bottom":0});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"opacity":0,
"height":0,
"padding-top":0,
"padding-bottom":0
});
}
},
fadeSlideLeftRight:{
init:function($elem){
js._customInit($elem,{
"opacity":0,
"width":0,
"padding-left":0,
"padding-right":0});
},
show:function($elem){
js._customShow($elem);
},
hide:function($elem){
js._customHide($elem,{
"opacity":0,
"width":0,
"padding-left":0,
"padding-right":0
});
}
}
};
js._init=function($elem,hiddenCallback){
$elem.removeClass("transition");
init($elem,hiddenCallback);
};
// 针对fadeslide自定义的init
js._customInit=function($elem,options){
var styles={};
for(var p in options){
styles[p]=$elem.css(p);
}
$elem.data("styles",styles);
js._init($elem,function(){
$elem.css(options);
});
};
js._show=function($elem,mode){
show($elem,function(){
$elem.addClass($elem.data("active")+"-active").stop()[mode](function(){
$elem.trigger("shown").data("status","shown");
});
});
};
js._customShow=function($elem){
show($elem,function(){
$elem.show();
//使用animate不存在同步异步的问题
$elem.stop().animate($elem.data("styles"),function(){
$elem.trigger("shown").data("status","shown");
});
});
};
js._hide=function($elem,mode){
hide($elem,function(){
$elem.removeClass($elem.data("active")+"-active").stop()[mode](function(){
$elem.trigger("hidden").data("status","hidden");
});
});
};
js._customHide=function($elem,options){
hide($elem,function(){
$elem.hide();
//使用animate不存在同步异步的问题
$elem.stop().animate(options,function(){
$elem.trigger("hidden").data("status","hidden");
});
});
};
var defaults={
css3:true,
js:true,
animation:"fade"
};
function showHide($elem,options){
var mode=null;
if(options.css3&&transition.isSupport){
mode=css3[options.animation]||css3[defaults.animation];
}else if(options.js){
mode=js[options.animation]||js[defaults.animation];
}
else{
mode=silent;
}
mode.init($elem);
return{
// 将$elem传入mode.show，避免重复操作
show:$.proxy(mode.show,this,$elem),
hide:$.proxy(mode.hide,this,$elem),
};
}
$.fn.extend({
showHide:function(option){
return this.each(function(){
var $this=$(this),
options=$.extend({},defaults,typeof option==="object"&&option),
// 执行一遍显示隐藏就不再赋值
mode=$this.data("showHide");
if(!mode){
$this.data("showHide",mode=showHide($this,options));
}
if(typeof mode[option]==="function"){
mode[option]();
}
});
}
});
})(jQuery);

//dropdown.js
(function($){
// 使用构造函数
function Dropdown($elem,options){
this.$elem=$elem,
this.options=options,//使能在prototype中使用
this.$layer=this.$elem.find(".dropdown-layer"),
this.activeClass=options.active+"-active";
this._init();
}
Dropdown.prototype._init=function(){
var self=this;
this.$layer.showHide(this.options);
if(this.options.event==="click"){
this.$elem.on("click",function(e){
self.show();
e.stopPropagation();
});
$(document).on("click",$.proxy(this.hide,this));
}
else{
this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
}
this.$layer.on("show shown hide hidden",function(e){
self.$elem.trigger("dropdown-"+e.type);
})
};
Dropdown.prototype.show=function(){
var self=this;
if(this.options.delay){
this.timer=setTimeout(function(){
self.$elem.addClass(self.activeClass);
self.$layer.showHide("show");
},this.options.delay);
}
else{
self.$elem.addClass(self.activeClass);
self.$layer.showHide("show");
}
};
Dropdown.prototype.hide=function(){
if(this.options.delay){
clearTimeout(this.timer);}
this.$elem.removeClass(this.activeClass);
this.$layer.showHide("hide");
};
Dropdown.DEFALTS={
css3:false,
js:false,
animation:"fade",
active:"dropdown"
};
$.fn.extend({
dropdown:function(option){
return this.each(function(){
var $this=$(this);
var options=$.extend({},Dropdown.DEFALTS, $this.data(),typeof option==="object"&&option);//如果opiton不是对象而是字符串就不会参与合并
var dropdown= $this.data("dropdown");
if(!dropdown){
$this.data("dropdown",dropdown=new Dropdown($this,options));
}
if(typeof dropdown[option]==="function"){
dropdown[option]();
}
})
}
});
})(jQuery);

//shoppingcart.js
(function($){
function ShoppingCart(option){
var $this=$(this);
this.layer=$(".dropdown-layer");
this.dropdown=$(".dropdown-shopping");
this.totalNum=0;
this.totoalPrice=0;
var self=this;
this.dropdown.on("mouseenter",function(){
self.getData(option);
return false;
})
$this.on("data-loaded",function(){
if(self.data.length==0){
self.createEmptyContent();
}
else{
self.createShoppingItems(self.data);
}
})

}
ShoppingCart.prototype.getData=function(option){
var $this=$(this),
self=this;
if(!$this.data("loaded")){
setTimeout(function(){
$.getJSON(option,function(data){
self.data=data;
$this.trigger("data-loaded");
$this.data("loaded",true);
});
},1000);
}
};
ShoppingCart.prototype.createShoppingItems=function(data){
var html='<div class="shopping-item-title">最新加入的商品</div><ul class="shopping-item-wrap">';
for(var i in data){
html+='<li class="shopping-item"><div class="info"><img src="'
+data[i].img
+'"></div><div class="info"><p class="item-name text-ellipsis"><a href="'
+data[i].link
+'">'
+data[i].name
+'</a></p><p class="item-price text-ellipsis">'
+'￥'+data[i].price
+' × '
+data[i].num
+'</p></div><div class="info">×</div></li>';
this.totalNum++;
this.totoalPrice+=(data[i].price*data[i].num);
}
html+='</ul><div class="shopping-item-bottom"><span class="total-items-num">共'
+this.totalNum
+'件商品</span><span class="total-price">共计￥'
+this.totoalPrice.toFixed(2)
+'</span><a href="###" target="_blank" class="shopping-button">去购物车</a></div>';
this.layer.removeClass("empty");
this.layer.html(html);
this.dropdown.find(".dropdown-toggle .item-num").html(this.totalNum);
};
ShoppingCart.prototype.createEmptyContent=function(){
var html="";
this.layer.addClass("empty");
this.layer.html(html);
};
$.fn.extend({
shoppingCart:function(option){
if(typeof option!=="string"){return;}
var shoppingCart=new ShoppingCart(option);
return this;
}
});
})(jQuery);