Javascript 使用jQuery添加类后的转换是'；他没有按预期工作

我得到了两列图像，完成了

列计数：2

。当我按下其中一个图像时，jQuery会在与

position:absolute

完全相同的位置复制该图像。然后添加一个类

.dupAnim

，使该图像具有全宽，并将其转换为

top:0；左侧：页面的0

。

---

所以我的问题是：
当我点击一个图像时，从原始状态到

top:0的转换；左：0；宽度：100%

不起作用。但当我点击“关闭”按钮时，它正完美地返回

看起来输入转换不起作用，但输出转换起作用。下面你可以找到一个片段。有人知道问题出在哪里吗

$（“.item”）。每个（函数（）{
var imageSrc=$（this.children（'img'）.attr（'src'）；
$（this.css（'background-image'，'url（'+imageSrc+'））；
$（this.find（'.clipped'）.css（'background-image'，'url（'+imageSrc+'））；
var imgHeight=$（this.find（'img'）.height（）；
$（this.css（'height'，imgHeight+'px'）；
});
$（“.item”）。单击（函数（）{
$（this.clone（）.appendTo（“.duplicated”）.addClass（“dupe”）；
var width=$（this.width（）；
var height=$（this.height（）；
var top=$（this）.offset（）.top；
var left=$（this）.offset（）.left；
var dupe=“.dupe”；
$（dupe）.css({
“宽度”：宽度+px，
“高度”：高度+px，
“top”：top+“px”，
“左”：左+px，
“位置”：“固定”
});
$（dupe）.addClass（“dupAnim”）；
$（“.portfolio close”）.fadeIn（）；
});
$（“.portfolio close”）。单击（函数（）{
$（.duplicated”）.find（.dupAnim”）.removeClass（“dupAnim”）；
setTimeout（函数（）{
$（“.duplicated”）.children（）.remove（）；
}, 500);
$（this.fadeOut（）；
});
*{
字体系列：“源Sans-Pro”，无衬线；
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.包装纸{
填充物：5%10%；
}
.wrapper.页面标题{
字号：4em；
字号：900；
边缘底部：20px；
}
.wrapper#组合项目{
-webkit列数：2；
-webkit柱间隙：0px；
-moz列数：2；
-moz柱间距：0px；
列数：2；
柱间距：10px；
}
.wrapper#公文包项目.项目{
-webkit列内部中断：避免；
-webkit背面可见性：隐藏；
边界半径：8px；
溢出：隐藏；
裕度：0 10px 0；
光标：指针；
宽度：100%；
背景：#fff；
背景重复：无重复；
背景尺寸：封面；
背景位置：50%50%；
过渡：.5s易进易出；
}
.wrapper#公文包项目.项目.剪裁{
填充：0 30px 10px 20px；
显示器：flex；
对齐项目：柔性端；
身高：100%；
线高：1.2；
溢出：隐藏；
颜色：#fff；
字体大小：1.7em；
背景：#fff；
背景重复：无重复；
背景尺寸：封面；
背景位置：50%50%；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
-webkit过滤器：反转（100%）色调旋转（0度）；
/*更改色调旋转以使用色调*/
过渡：.5s易进易出；
}
.wrapper#公文包项目.项目.剪裁.项目标题{
溢出：隐藏；
}
.wrapper#公文包项目.item img{
宽度：100%；
可见性：隐藏；
}
.wrapper#公文包项目。重复。重复{
位置：固定；
过渡：.5s易进易出；
}
.wrapper#公文包项目。重复。重复。重复。重复{
顶部：0！重要；
左：0！重要；
宽度：100%！重要；
高度：100px！重要；
边界半径：0！重要；
盒影：无！重要；
过渡：.5s易进易出；
}
.wrapper#投资组合项目。投资组合结束{
位置：固定；
z指数：21；
光标：指针；
排名：0；
右：0；
背景：515151；
宽度：50px；
高度：50px；
字体大小：30px；
颜色：白色；
填充：10px 0 13px；
线高：1；
显示：无；
}

瑜伽
大象
鸟
看法
狗
✕
转换工作正常，只是复制品的形状/大小与原始版本不同。
您的
转换：.5s轻松进出
。当您修改初始样式时，dupe
将调用转换（例如，将图像的
width:100%
修改为
width+'px'
，该值通过js计算）使用下一个代码：

```

})
```

然后，如果您立即
addClass（'dupAnim'）
，它将覆盖前面的样式修改（例如，将宽度设置为
100%！重要的
），因此，您将看不到宽度的转换

因此，您可以在设置通过js计算的样式之前为取消设置转换添加一个额外的类名，然后删除该类名

更重要的是，当修改类名以调用浏览器的回流时，需要添加一个setTimeout


$（“.item”）。每个（函数（）{
var imageSrc=$（this.children（'img'）.attr（'src'）；
$（this.css（'background-image'，'url（'+imageSrc+'））；
$（this.find（'.clipped'）.css（'background-image'，'url（'+imageSrc+'））；
var imgHeight=$（this.find（'img'）.height（）；
$（this.css（'height'，imgHeight+'px'）；
});
$（“.item”）。单击（函数（）{
$（this.clone（）.appendTo（“.duplicated”）.addClass（“dupe”）；
var width=$（this.width（）；
var height=$（this.height（）；
var top=$（this）.offset（）.top；
var left=$（this）.offset（）.left；
var dupe=“.dupe”；
$（dupe）.addClass（'no-transition'）.css({
“宽度”：宽度+px，
“高度”：高度+px，
“top”：top+“px”，
“左”：左+px，
'位置'：'固定'，
});
setTimeout（函数（）{
$（dupe.removeClass（'no-transition'）；
}, 10);
setTimeout（函数（）{
$（dupe）.addClass（“dupAnim”）
$（“.po
$(dupe).css({
'width': width + 'px',
'height': height + 'px',
'top': top + 'px',
'left': left + 'px',
'position': 'fixed',

$(".item").click(function(){
  // changed the container
  $(this).clone().appendTo(".duplicated").wrap('<span class="img-container dupe">');
  var width = $(this).width();
  var height = $(this).height();
  var top = $(this).offset().top;
  var left = $(this).offset().left; 
  var dupe = ".dupe";
   $(dupe).css({
    'width': width + 'px',
    'height': height + 'px',
    'top': top + 'px',
    'left': left + 'px',
    'position': 'fixed',
  });
 // settime out
  setTimeout(function(){    
        $(dupe).addClass("dupAnim");
  },100) ; 

 $(".portfolio-close").fadeIn();

});

$(".portfolio-close").click(function(){
  $(".duplicated").find(".dupAnim").removeClass("dupAnim");
  setTimeout(function(){
    $(".duplicated").children().remove();
  }, 500);
  $(this).fadeOut();
});