【问题标题】：Translate an element every time relative to its current position?每次相对于其当前位置翻译一个元素？
【发布时间】：2015-04-11 06:21:43
【问题描述】：
我的目标是每次单击按钮时，100px 沿“X”轴的框100px。我通过在 jQuery 中使用 temp 变量以某种方式使其成为可能。
有没有其他方法可以纯粹通过CSS来实现，这样当点击按钮时，框应该从当前位置translate100px？
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>
【问题讨论】：
标签：
jquery
html
css
css-transforms
【解决方案1】：
这里是一个纯 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>
【解决方案2】：
让我们尝试使用.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;
}
【解决方案3】：
我认为这个问题的答案是：不，你不能只用 CSS 来做......或者也许只是“现在不行”。
HTML 和 CSS 是声明性语言，用于描述页面应如何组织以及浏览器应如何表示。但它们是“静态的”：它们不会改变，或者至少它们不会自行改变（因为它们可以通过使用 JavaScript 等脚本语言来改变）。
因此，在您的特定情况下，每次单击按钮时，您都需要使用不同的语言来跟踪这些更改并相应地应用操作（就像您目前使用 JavaScript 所做的那样）。
为什么我说“暂时没有”？因为 CSS 正在获得一些使其略微动态的特性，并且如果扩展（请注意，这只是我的梦想），它们可以帮助您实现您所描述的事情，而无需 JavaScript。
例如：counter-reset 和counter-increment 允许跟踪一个元素的出现次数，它们可以用于::before 和::after 的content。如果它们被扩展以便您可以在其他规则中使用它们（例如：作为数值），并且如果它们不仅跟踪元素而且跟踪选择器（例如：:active），您可以在不使用 JavaScript 的情况下实现您想要的。 .. 但是，那是我的白日梦。
【解决方案4】：
您可以在transform 属性上链接以空格分隔的转换值。您可以简单地读回应用的转换并将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（至少不是以灵活的方式）。