使用jQuery添加类后的转换无法按预期工作

Question

我有两列图像，用column-count:2完成。当我按下其中一个图像时，jQuery会将该图像复制到与position:absolute完全相同的位置。然后添加一个类.dupAnim，使该图像成为全宽并将其转换为页面的top:0;left:0。

<小时/> 所以我的问题：
当我点击图像时，从原始状态到top:0; left:0; width:100%的转换不起作用。但是当我点击关闭按钮时，它完全转回。

似乎转换中的 无效，但 out转换正在运行。您可以在下面找到一个片段。有谁知道问题是什么？

$(".item").each(function(){
  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").click(function(){
  
  $(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({
    'width': width + 'px',
    'height': height + 'px',
    'top': top + 'px',
    'left': left + 'px',
    'position': 'fixed'
  });
  
  $(dupe).addClass("dupAnim");
  
  $(".portfolio-close").fadeIn();
  
});

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

* {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  padding: 5% 10%;
}
.wrapper .page-title {
  font-size: 4em;
  font-weight: 900;
  margin-bottom: 20px;
}
.wrapper #portfolio-items {
  -webkit-column-count: 2;
  -webkit-column-gap: 0px;
  -moz-column-count: 2;
  -moz-column-gap: 0px;
  column-count: 2;
  column-gap: 10px;
}
.wrapper #portfolio-items .item {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 10px 0;
  cursor: pointer;
  width: 100%;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped {
  padding: 0 30px 10px 20px;
  display: flex;
  align-items: flex-end;
  height: 100%;
  line-height: 1.2;
  overflow: hidden;
  color: #fff;
  font-size: 1.7em;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-filter: invert(100%) hue-rotate(0deg);
  /* change hue-rotate to play with tint */
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped .item-title {
  overflow: hidden;
}
.wrapper #portfolio-items .item img {
  width: 100%;
  visibility: hidden;
}
.wrapper #portfolio-items .duplicated .dupe {
  position: fixed;
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .duplicated .dupe.dupAnim {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .portfolio-close {
  position: fixed;
  z-index: 21;
  cursor: pointer;
  top: 0;
  right: 0;
  background: #515151;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: white;
  padding: 10px 0 0 13px;
  line-height: 1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  
  <div id="portfolio-items">
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Yoga</h1>
      </div>
      <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Elephant</h1>
      </div>
      <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Bird</h1>
      </div>
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">View</h1>
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Ailurus_fulgens_RoterPanda_LesserPanda-2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Dog</h1>
      </div>
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg">
    </div>
    
  <div class="duplicated"></div>
    
  <div class="portfolio-close">✕</div>
    
  </div>
</div>

Answer 1

我认为您希望将fadeIn和dupe类的添加作为回调添加到正在淡入的容器中。这可以确保在第一个效果完成之后它不会执行回调

此外，我在代码的开头添加了$(".portfolio-close").hide();，以确保容器始终隐藏起来，因为在单击一个项目后，它将是可见的，您需要为每次单击隐藏它，以便当班级发生变化时，过渡将起作用。

我重新组织了副本的创建（删除了不必要的变量并稍微清理了代码），并将all参数添加到transition属性中：

$(".item").each(function(){
  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").click(function(){
  
  var $clone = $(this).clone();
  
  // Make sure the container is hidden before the effects begin:
  $(".portfolio-close").hide();  

  $clone.appendTo(".duplicated");
  $clone.hide();  
  
  // Passing a function as the second argument to JQuery's show(),
  // hide(), fadeIn(), fadeOut(), etc. ensures that the function
  // is run AFTER the first effect is complete.
  $(".portfolio-close").fadeIn(50, function(){
    $clone.fadeIn();
    $clone.addClass("dupe");
  });    

  // No need to create varaibles for values you are only
  // going to access just once. Just get the values directly:
  $clone.css({
    'width': $(this).width() + 'px',
    'height': $(this).height() + 'px',
    'top': $(this).offset().top + 'px',
    'left': $(this).offset().left + 'px',
    'position': 'fixed'
  });

  $clone.addClass("dupAnim");   
});

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

* {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  padding: 5% 10%;
}
.wrapper .page-title {
  font-size: 4em;
  font-weight: 900;
  margin-bottom: 20px;
}
.wrapper #portfolio-items {
  -webkit-column-count: 2;
  -webkit-column-gap: 0px;
  -moz-column-count: 2;
  -moz-column-gap: 0px;
  column-count: 2;
  column-gap: 10px;
}
.wrapper #portfolio-items .item {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 10px 0;
  cursor: pointer;
  width: 100%;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  transition:all .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped {
  padding: 0 30px 10px 20px;
  display: flex;
  align-items: flex-end;
  height: 100%;
  line-height: 1.2;
  overflow: hidden;
  color: #fff;
  font-size: 1.7em;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-filter: invert(100%) hue-rotate(0deg);
  /* change hue-rotate to play with tint */
  transition:all .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped .item-title {
  overflow: hidden;
}
.wrapper #portfolio-items .item img {
  width: 100%;
  visibility: hidden;
}
.wrapper #portfolio-items .duplicated .dupe {
  position: fixed;
  transition:all .5s ease-in-out;
}
.wrapper #portfolio-items .duplicated .dupe.dupAnim {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition:all .5s ease-in-out;
}
.wrapper #portfolio-items .portfolio-close {
  position: fixed;
  z-index: 21;
  cursor: pointer;
  top: 0;
  right: 0;
  background: #515151;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: white;
  padding: 10px 0 0 13px;
  line-height: 1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  
  <div id="portfolio-items">
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Yoga</h1>
      </div>
      <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Elephant</h1>
      </div>
      <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Bird</h1>
      </div>
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">View</h1>
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Ailurus_fulgens_RoterPanda_LesserPanda-2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Dog</h1>
      </div>
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg">
    </div>
    
  <div class="duplicated"></div>
    
  <div class="portfolio-close">✕</div>
    
  </div>
</div>

Answer 2

转换工作正常，只是你的副本不是从与原始相同的形状/大小开始。

Answer 3

当您修改初始样式时，transition: .5s ease-in-out .dupe将调用转换（例如，将图像的width: 100%修改为width + 'px'，通过js计算得出{下一个代码：

```

$(dupe).css({
'width': width + 'px',
'height': height + 'px',
'top': top + 'px',
'left': left + 'px',
'position': 'fixed',

}） ```

然后，如果您立即addClass('dupAnim')，它将覆盖以前的样式修改（例如，将宽度设置为100% !important），因此，您将看不到宽度的过渡。

因此，您可以在设置通过js计算的样式之前添加额外的className以取消设置转换，然后删除className。

添加更多的东西是你需要在修改className时添加一个setTimeout来调用浏览器的reflow。

$(".item").each(function(){
  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").click(function(){
  
  $(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({
    'width': width + 'px',
    'height': height + 'px',
    'top': top + 'px',
    'left': left + 'px',
    'position': 'fixed',
  });
  setTimeout(function() {
 $(dupe).removeClass('no-transition');
  }, 10);
 
  setTimeout(function() {
  $(dupe).addClass("dupAnim") 
    $(".portfolio-close").fadeIn(500);
  }, 30);
  
  
});

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

* {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  padding: 5% 10%;
}
.wrapper .page-title {
  font-size: 4em;
  font-weight: 900;
  margin-bottom: 20px;
}
.wrapper #portfolio-items {
  -webkit-column-count: 2;
  -webkit-column-gap: 0px;
  -moz-column-count: 2;
  -moz-column-gap: 0px;
  column-count: 2;
  column-gap: 10px;
}
.wrapper #portfolio-items .item {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 10px 0;
  cursor: pointer;
  width: 100%;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped {
  padding: 0 30px 10px 20px;
  display: flex;
  align-items: flex-end;
  height: 100%;
  line-height: 1.2;
  overflow: hidden;
  color: #fff;
  font-size: 1.7em;
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-filter: invert(100%) hue-rotate(0deg);
  /* change hue-rotate to play with tint */
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .item .clipped .item-title {
  overflow: hidden;
}
.wrapper #portfolio-items .item img {
  width: 100%;
  visibility: hidden;
}
.wrapper #portfolio-items .duplicated .dupe {
  position: fixed;
}
.no-transition {
  transition: unset !important;
}
.wrapper #portfolio-items .duplicated .dupe.dupAnim {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: .5s ease-in-out;
}
.wrapper #portfolio-items .portfolio-close {
  position: fixed;
  z-index: 21;
  cursor: pointer;
  top: 0;
  right: 0;
  background: #515151;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: white;
  padding: 10px 0 0 13px;
  line-height: 1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  
  <div id="portfolio-items">
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Yoga</h1>
      </div>
      <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Elephant</h1>
      </div>
      <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Bird</h1>
      </div>
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">View</h1>
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Ailurus_fulgens_RoterPanda_LesserPanda-2.jpg">
    </div>
    
    <div class="item">
      <div class="clipped">
        <h1 class="item-title">Dog</h1>
      </div>
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg">
    </div>
    
  <div class="duplicated"></div>
    
  <div class="portfolio-close">✕</div>
    
  </div>
</div>

Answer 4

在添加dupAnim类时更新jQuery并添加SetTimeout（），然后使用新容器wrap（）重复的img。

$(".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();
});