动画或变换方法？

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

来源

2015-12-22 Owlay

如何在页面加载时保持div的状态？ – DigitalDouble

当我打开页面时div的状态已被更改，但我没有看到运动（如动画）sry我的英文不好 – Owlay

你可以使用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

来源

2015-12-22 04:01:39

您的编辑没有为您的文章添加任何值。为什么再次编辑？ – Alex

你可以只用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; 
}

希望它有帮助！

来源

2015-12-22 04:21:50

是的它帮助。它非常棒，你没有使用Java或jQuery。好主意 – Owlay

动画或变换方法？

回答

相关问题