在Vue中實現div平移主要是通過CSS屬性transform來實現。transform可以實現元素的各種變形效果,如平移、縮放、旋轉等。下面通過一個簡單的例子來演示如何使用Vue實現div平移。
//HTML//CSS
#app {
width: 100%;
height: 300px;
position: relative;
}
#app div {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
以上代碼定義了一個父元素和一個子元素,子元素將會在父元素中進行平移。接下來在Vue的mounted方法中使用transform屬性實現平移效果。
//JS
new Vue({
el: '#app',
mounted: function () {
var box = this.$refs.box;
setInterval(function () {
var left = Math.floor(Math.random() * (window.innerWidth - box.offsetWidth));
var top = Math.floor(Math.random() * (window.innerHeight - box.offsetHeight));
box.style.transform = 'translate(' + left + 'px, ' + top + 'px)';
}, 2000);
}
});
在mounted方法中,我們首先獲取到子元素的引用box,然后使用setInterval方法每隔兩秒隨機生成一個left和top值,將box平移相應的距離。transform屬性的translate方法接受兩個參數,分別是水平方向和垂直方向的平移距離。
以上就是使用Vue實現div平移的簡單教程,希望對大家有所幫助。
上一篇c 創建一個json對象
下一篇c 創建一個json