js sortable有動(dòng)畫(huà)效果嗎

js
小樊
82
2024-10-23 01:57:07

Sortable.js庫(kù)本身不提供內(nèi)置的動(dòng)畫(huà)效果。但是，你可以通過(guò)自定義樣式和過(guò)渡效果在Sortable.js中實(shí)現(xiàn)動(dòng)畫(huà)。

以下是一個(gè)使用Sortable.js實(shí)現(xiàn)動(dòng)畫(huà)效果的簡(jiǎn)單示例：

  1. 首先，在你的HTML文件中創(chuàng)建一個(gè)列表：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js Animation Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="sortableList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
  1. 接下來(lái)，在你的CSS文件（例如styles.css）中添加一些樣式以實(shí)現(xiàn)動(dòng)畫(huà)效果：
.list-item {
    transition: all 0.3s ease;
    padding: 10px;
    background-color: #f1f1f1;
    margin-bottom: 5px;
}

.list-item.sorted {
    background-color: #ddd;
}

在這個(gè)示例中，我們?yōu)榱斜眄?xiàng)添加了一個(gè)0.3秒的過(guò)渡效果，當(dāng)列表項(xiàng)被拖動(dòng)并放置到新位置時(shí)，背景顏色會(huì)發(fā)生變化。

  1. 最后，在你的JavaScript文件（例如script.js）中使用Sortable.js：
document.addEventListener('DOMContentLoaded', function() {
    const sortableList = document.getElementById('sortableList');
    new Sortable(sortableList, {
        animation: 150 // 動(dòng)畫(huà)持續(xù)時(shí)間，單位為毫秒。數(shù)值設(shè)置成較小的值可以實(shí)現(xiàn)更快的動(dòng)畫(huà)效果。
    });
});

在這個(gè)示例中，我們將動(dòng)畫(huà)持續(xù)時(shí)間設(shè)置為150毫秒。你可以根據(jù)需要調(diào)整該值以實(shí)現(xiàn)所需的動(dòng)畫(huà)效果。

通過(guò)這種方式，你可以在Sortable.js中實(shí)現(xiàn)自定義動(dòng)畫(huà)效果。

0 踩