工作示例：

Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

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);}

＆＃13;

<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>

＆＃13;

Answer 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;
}

Answer 3

我认为对此的答案将是：不，你不能专门用CSS做...或者也许只是“不在这一刻”。

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

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

为什么我说“不是在这个时刻”？因为CSS正在获得一些使它略微动态的功能，如果扩展（并注意到这只是我的梦想），它们可以帮助你实现像你描述的那样而不需要JavaScript。

例如：counter-reset和counter-increment允许跟踪元素的出现次数，并且可以在content ::before和::after中使用它们{1}}。如果它们被扩展，那么你可以在其他规则中使用它们（例如：作为数值），如果它们不仅跟踪元素而且跟踪选择器（例如：:active），你可以实现你想要的而不使用JavaScript ...但是，再次，那是我做白日梦。

Answer 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（至少不是以灵活的方式）。

Answer 5

CSS无法执行onclick事件。但是，在锚标记<a>上，您可以使用:visited和:active psuedo类来模拟点击行为。试试这里:: http://jsfiddle.net/8aagpgb4/13/

这有点hackish但我希望你能得到这个想法：）

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

5 个答案:

工作示例：