CSS转换持续时间不适用于转换效果的第一个实例

CSS transition duration not applying on first instance of transition effect

本文关键字：转换 第一个 实例 适用于 持续时间 不适用 CSS      更新时间：2023-09-26

我正在尝试创建一系列在按下按钮时触发的滑动div。这个想法是每个div都会有一个缩略图和一些文本。点击左/右按钮后，div会相应地移动它们的位置。

我的代码可以在下面的jsfiddle中看到。我遇到3个问题：

1( "过渡：左2秒"规则不适用于第一个过渡效果，它适用于后续的过渡效果。

2( 我希望重复按下相应的按钮，再次应用左侧的属性值，这样我就可以重复滑动div。

3( 我不想用"right"按钮将"left"属性重新定位回0，而是想将其移回与前一个left属性值相反的方向。

从本质上讲，我试图重新创建在这一侧找到的滑块。

http://www.euphoriumbakery.com/

如有任何帮助或意见，我们将不胜感激。

非常感谢你的帮助。

https://jsfiddle.net/kshatriiya/g709swLg/1/

window.onload = function() {
  $("#left").on("click", function() {
    $("#view").css("left", "-262px");
  });
  $("#right").on("click", function() {
    $("#view").css("left", "0px");
  });
}
#galwrapper {
  width: 650px;
  height: 400px;
  display: block;
  overflow: hidden;
}
#view {
  position: relative;
  width: 1423px;
  transition: left 2s;
}
.col-md {
  display: inline-block;
  margin-top: 100px;
  width: 18%;
}
.thumb img {
  opacity: 0.9;
  height: auto;
  width: auto;
  max-height: 150px;
  max-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galwrapper">
  <div id="view">
    <div class="col-md">
      <div class="thumb">
        <img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg">
        <div class="caption">
          <h4>Retro Cake</h4>
        </div>
      </div>
    </div>
    <div class="col-md">
      <a href="#" class="thumb active">
        <img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
        <div class="caption">
          <h4>Strawberry Cake</h4>
        </div>
      </a>
    </div>
    <div class="col-md" id="mid">
      <a href="#" class="thumb">
        <img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
        <div class="caption">
          <h4>Retro Cake</h4>
        </div>
      </a>
    </div>

#view {
 position: relative;
 width: 1423px;
 left:0;
 transition: left 2s;
}

最初为具有id视图的div生成left:0;https://jsfiddle.net/81tqeof4/6/

对于滑动效果，获取当前左侧位置并更新位置。查看示例的fiddle

$("#left").on("click", function(){
    var leftPosition =  parseInt($("#view").position().left) - 256; 
     $("#view").css("left", -Math.abs(leftPosition));
 });

transition仅适用于现有属性

因此，最初(在CSS中(您的#view中没有可用的left属性。只有稍后单击，JavaScript才会添加left，您的转换才会开始工作。

因此，基本上，在JavaScript生效并添加左侧之前，您需要将left属性设置为CSS中的一个值

#view {
  position: relative;
  width: 1423px;
  left: 0; //initiate
  transition: left 2s;
}
相关文章：