每次相对于当前位置翻译一个元素？

Question

我的目标是每次单击按钮时 translate 框沿 'X' 轴 100px。我通过在 jQuery 中使用 temp 变量以某种方式使它成为可能。有没有其他方法可以完全通过 CSS 实现，这样当单击按钮时，框应该从当前位置 translate 100px?

var temp = 100;
$(document).ready(function(){
 $('#b1').click(function(){
  $('#box-one').css("transform","translate("+temp+"px, 0px)");
  temp = temp + 100;
 });
});

#box-one
{
 background-color: blue;
 height: 100px;
 width: 100px;
 transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="box-one"></div>
  <button id="b1">Move</button>
</body>
</html>

Answer 1

让我们尝试使用.animate()来完成这个任务。

$(document).ready(function(){
    $('#b1').click(function(){
        $('#box-one').animate({
            "left":     "+=100px"
        }, "slow");
    });
});

我们需要稍微修改 CSS。让我们去掉 transition 并添加一个 position 属性：

#box-one
{
    background-color: blue;
    height: 100px;
    width: 100px;
    position: relative;
}

Answer 2

我认为答案是：不，你不能只用 CSS... 或者只是 "not at this moment".

HTML 和 CSS 是声明性语言，描述页面应如何组织以及浏览器应如何表示。但它们是 "static"：它们不会改变，或者至少它们不会自行改变（因为它们可以通过使用 JavaScript 等脚本语言来改变）。

因此，在您的特定情况下，每次单击按钮时，您都需要使用不同的语言来跟踪这些更改并相应地应用操作（正如您目前使用 JavaScript).

为什么我说"not at this moment"？因为 CSS 正在获得一些使其略微动态的功能，并且如果扩展（请注意这只是我的梦想），它们可以帮助您实现您所描述的事情而无需 JavaScript。

例如：counter-reset 和 counter-increment 允许跟踪元素出现的次数，它们可以用在 content 或 ::before 中和 ::after。如果它们被扩展以便您可以在其他规则中使用它们（例如：作为数值），并且如果它们不仅跟踪元素而且跟踪选择器（例如：:active），您可以在不使用的情况下实现您想要的JavaScript...不过，这又是我在做白日梦。

Answer 3

CSS 不能做 onclick 事件。但是，在锚标记 <a> 上，您可以使用 :visited 和 :active 伪 class 来模拟点击行为。在这里试试：：http://jsfiddle.net/8aagpgb4/13/

这有点老套，但我希望你能明白:)

Answer 4

您可以在 transform 属性上链接 space 分隔的转换值。您可以简单地读回应用的转换并将 translate(100px, 0px) 添加到字符串，补偿默认的 none 值。

工作示例：

$(document).ready(function(){
 $('#b1').click(function(){
        var transform = $('#box-one').css('transform');
  $('#box-one').css('transform', (transform !== 'none' ? transform : '') + ' translate(100px, 0px)');
 });
});

#box-one
{
 background-color: blue;
 height: 100px;
 width: 100px;
 transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="box-one"></div>
  <button id="b1">Move</button>
</body>
</html>

这消除了对计数器变量的需要。没有办法从等式中完全删除 JavaScript（至少不是以灵活的方式）。

Answer 5

这里是一个纯粹的CSS方法，虽然有点疯狂。

根据需要添加更多输入（和关联的 CSS）：

html, body {
  margin: 0;
  padding: 0;
}

#box-one {
  background-color: blue;
  height: 100px;
  width: 100px;
  transition: all 0.3s ease;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
  transform: scaleX(7) scaleY(2);
  top: 100px;
}

input:first-of-type {z-index: 1;}
input:checked {display: none;}
input:checked + input {z-index: 1}

input:checked:nth-child(1)  ~ #box-one {transform: translateX(100px);}
input:checked:nth-child(2)  ~ #box-one {transform: translateX(200px);}
input:checked:nth-child(3)  ~ #box-one {transform: translateX(300px);}
input:checked:nth-child(4)  ~ #box-one {transform: translateX(400px);}
input:checked:nth-child(5)  ~ #box-one {transform: translateX(500px);}
input:checked:nth-child(6)  ~ #box-one {transform: translateX(600px);}
input:checked:nth-child(7)  ~ #box-one {transform: translateX(700px);}
input:checked:nth-child(8)  ~ #box-one {transform: translateX(800px);}
input:checked:nth-child(9)  ~ #box-one {transform: translateX(900px);}
input:checked:nth-child(10) ~ #box-one {transform: translateX(1000px);}

<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<div id="box-one"></div>
<button>Move</button>

每次相对于当前位置翻译一个元素？

Translate an element every time relative to its current position?

jquery

html

css

css-transforms

工作示例：