Question

我想在点击按钮后移动div如果我写这个css：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  -ms-transform: translate(50px, 100px);  /* IE 9 */
  -webkit-transform: translate(50px, 100px);  /* Safari */
  transform: translate(50px, 100px);  /* Standard syntax */
}

然后问题是，当我打开页面时，我看不到div的运动所以我必须使用动画，如果我使用动画，问题是div将自动开始移动。我的问题是我应该使用什么？动画或变换？我怎么能？

Answer 1

你可以用CSS3做到这一点！检查此fiddle：

创建<label>和<input>元素：

<label class="label-btn" for="clickme">Click me!</label>
<input type="checkbox" id="clickme" />    
<div class="box"></div>

然后，将这个小技巧CSS应用于复选框并为您的标签设置样式，就好像它是一个按钮：

#clickme {
    display: none;
}

#clickme:checked + div.box {
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari */
  transform: translate(50px,100px); /* Standard syntax */
}

.label-btn {
    cursor: pointer;
    padding: 10px;
    background: pink;
    display:inline-block;
}

此外，将过渡属性添加到div.box，以便转换可以顺利运行（如果需要，可以更改转换时间）：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  transition: 1s all;
}

希望它有所帮助！

Answer 2

您可以使用jquery。

的CSS：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  transition-duration=2s; //or any duration else
}

jquery的：

$("button").click(function() {
  $(".box").css({
    "transform": "translate(50px,100px)",
    "-webkit-transform": "translate(50px,100px)",
    "-ms-transform": "translate(50px,100px)"
  });
});

JSFiddle link

动画或变换方法？

2 个答案: