代码之家 › 专栏 › 技术社区 › Tobias Glaus

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

css html jquery javascript

Tobias Glaus · 技术社区 · 8 年前

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

所以我的问题是:
当我单击图像时,从原始状态到


   top:0; left:0; width:100%

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

不起作用,但 输出转换 正在工作。下面你可以找到一个片段。有人知道问题出在哪里吗?

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

4 回复 | 直到 8 年前

Scott Marcus 8 年前

我想你想添加 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>

Chuck Le Butt 8 年前

DesignMonkeyJim 8 年前

更新jQuery并在添加dupAnim类时添加SetTimeout(),然后用新容器包装()重复的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();
});

JiangangXiong 8 年前

你的 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计算的样式之前,可以添加一个额外的类名来取消设置转换,然后删除该类名。

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

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