动画或变换方法？答案

【问题标题】：animations or transform method?动画或变换方法？
【发布时间】：2016-02-29 08:43:14
【问题描述】：

我想在点击一个按钮后移动一个 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 将自动开始移动。我的问题是我应该使用什么？动画还是变形？我该怎么办？

【问题讨论】：

如何在页面加载时保持div 的状态？
当我打开页面时，div 的状态已更改，但我没有看到动作（如动画） sry 我的英语不好

标签： css animation css-transitions

【解决方案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;
}

希望对您有所帮助！

【讨论】：

是的，它有帮助。它太棒了，你没有使用 java 或 jquery。好主意

【解决方案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

【讨论】：

您的编辑没有为您的帖子增加任何价值。为什么要再次编辑？