Question

最近我问了一个关于div中过渡动画的类似问题。（See this post）

下面的代码片段显示了我的解决方案 但是，仅当宽度以像素为单位而非百分比时，动画才有效有人知道解决这个问题吗？

编辑（更多信息以澄清我的问题）：

在网站的这一部分中，我有一个标题应该始终保持不变，并且有3页内容可以通过＆＃34;刷卡＆＃34;关于用户输入。
因此，页面左边距的跨度范围为-100％至+ 100％。

我想要一个滑动动画，以便用户可以从第2页（即显示图像）切换到第3页（即与图像相关的文本）。

由于浏览器窗口大小不同，我需要宽度为百分比。不幸的是...

＆＃13;

$(document).ready(function() {
  $(".next").click(function() {
    var current = $(".container").css("left");
    if (current == "-200px") {
      current = "-400px";
    } else if (current == "0px") {
      current = "-200px";
    }
    $(".container").css("left", current);
  });
  $(".prev").click(function() {
    var current = $(".container").css("left");
    if (current == "-200px") {
      current = "0px";
    } else if (current == "-400px") {
      current = "-200px";
    }
    $(".container").css("left", current);
  });
});

＆＃13;

.row {
  border: 1px solid black;
  height: 200px;
  margin: 0;
  width: 200px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.container {
  height: 200px;
  margin: 0;
  width: 600px;
  padding: 0;
  display: block;
  position: absolute;
  left: -200px;
  top: 0;
  -webkit-transition: left 0.5s ease-in-out;
  -moz-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
}
.ins {
  width: 200px;
  float: left;
  height: 200px;
  margin: 0;
  padding: 0;
  background-color: red;
}
.div1 {
  background-color: red;
}
.div2 {
  background-color: green;
}
.div3 {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TITLE</title>
  <meta name="Title" content="Main">
</head>

<body>

  <div class="row">
    <div class="container">
      <div class="ins div1">div-1</div>
      <div class="ins div2">div-2</div>
      <div class="ins div3">div-3</div>
    </div>
  </div>
  <button class="prev">prev</button>
  <button class="next">next</button>


</body>

</html>

＆＃13;

Answer 1

我已经改变了左侧定位，以便对各个元素进行转换：

现在，类行也设置为占用完整的浏览器宽度。容器类是300％（因为它将为3个元素腾出空间）。孩子们占33％，最后是100％。

＆＃13;

var pos = 2; /* values 1 - 2 or 3 */

$(document).ready(function() {
  $(".next").click(function() {
    if (pos == 1) {
      $(".container").removeClass("pos1");
      $(".container").addClass("pos2");
      pos++;
     } else if (pos == 2) {
      $(".container").removeClass("pos2");
      $(".container").addClass("pos3");
      pos++;
     }
  });
  $(".prev").click(function() {
    if (pos == 3) {
      $(".container").removeClass("pos3");
      $(".container").addClass("pos2");
      pos--;
     } else  if (pos == 2) {
      $(".container").removeClass("pos2");
      $(".container").addClass("pos1");
      pos--;
     }
  });
});

＆＃13;

.row {
  border: 1px solid black;
  height: 200px;
  margin: 0;
  width: 100%;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.container {
  height: 200px;
  width: 300%;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 0;
}
.ins {
  width: 33.33%;
  height: 200px;
  margin: 0;
  padding: 0;
  float: left;
  transition: transform 0.5s ease-in-out;
}
.div1 {
  background-color: red;
}
.div2 {
  background-color: green;
}
.div3 {
  background-color: blue;
}

.pos2 .ins {
 transform: translateX(-100%);  
}
.pos3 .ins {
 transform: translateX(-200%);  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TITLE</title>
  <meta name="Title" content="Main">
</head>

<body>

  <div class="row">
    <div class="container pos2">
      <div class="ins div1">div-1</div>
      <div class="ins div2">div-2</div>
      <div class="ins div3">div-3</div>
    </div>
  </div>
  <button class="prev">prev</button>
  <button class="next">next</button>


</body>

</html>

＆＃13;

Answer 2

Narusan，

如果我正确理解你的目标，问题的一部分就是无论如何，jQuery都希望将px单位返回给你。您可以设置百分比值，但似乎不会将这些百分比返回给您。

我改变了你的代码以证明这一点：

＆＃13;

$(document).ready(function() {
  $(".next").click(function() {
    var current = $(".container").css("left");
    console.log(current);
    if (current == "-200px" || current == "-100%") {
      current = "-200%";
    } else if (current == "0%") {
      current = "-100%";
    }
    $(".container").css("left", current);
  });
  $(".prev").click(function() {
    var current = $(".container").css("left");
    console.log(current);

    if (current == "-200px" || current == "-100%") {
      current = "0%";
    } else if (current == "-200%") {
      current = "-100%";
    }
    $(".container").css("left", current);
  });
});

＆＃13;

您将看到打印到控制台的值始终为px，但如果您检查DOM，则会看到在该元素上设置了％值。

与vals一样，以非常不同的方式解决问题似乎是一种很好的方法。

CSS3 Div动画相对间距

2 个答案: