如何使用 onclick 使 CSS 過渡工作

Question

我正在參考： https : //codepen.io/SudhakarJ/pen/GRgpddL 。 我想在我的應用程序中制作相同的過渡效果，我有 10 張圖像，我使用 3 個類，即汽車、動物和水果，當我點擊它們時，它們應該被過濾。 但是動畫過濾器選擇器沒有執行過渡

HTML

<div class="section"> 
    <div id="wrapper-filter">
        <ul id="filter-bar">
            <span class="pill" style="color:#212121"></span>
            <li class="filter-option option-1 active" onclick="filterSelection('all')" style="color:#fffefe">All</li>
            <li class="filter-option option-2" onclick="filterSelection('cars')" style="color:#fffefe">Shoes</li>
            <li class="filter-option option-3" onclick="filterSelection('animals')" style="color:#fffefe">Toys</li>
            <li class="filter-option option-4" onclick="filterSelection('fruits')" style="color:#fffefe">Toys</li>                        
        </ul>
    </div>

css

body {background-color:#ffffff; margin: 0; padding:0; font-family: Tahoma;}
h2 {text-align:center;}
#filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;}
#wrapper-filter {background-color:#000; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;}
#filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;}
.pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; }
.filter-option {transition: color 500ms;}
    #filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;}
#filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;}
#filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;}

.option-1.active, .option-2.active, .option-3.active {color:#FFD700; transition: color 200ms; }

JS

$(document).ready(function() {
    $("#filter-bar li").click(function() {
        $("#filter-bar li").removeClass("active")
        $(this).addClass("active")
        $("#filter-bar").removeClass().addClass($(this).attr("data-target"))
    })
})

Answer 1

以下是 codepen 的改編版本，其中：

• 菜單寬度從 570px 更改為 760px 以考慮 4 個元素而不是 3 個（它可以以動態方式完成以考慮任意數量的項目）
• 項目寬度不變（190px）
• onclick=filterSelection自定義方法被刪除。 JS 使用data-target-filter attr 檢索要應用的類
• CSS 轉換規則使用您的選項（ .all, .car, .animals, .fruits而不是 example .option-1,.option-2,.option-3 ）進行更新，因此當值作為類應用時它們匹配#bar-filter

 $("#filter-bar li").click(function() { $("#filter-bar li").removeClass("active"); $(this).addClass("active"); $("#filter-bar").removeClass().addClass($(this).attr("data-target-filter")); });

 #filter-bar { width: 100%; margin: 0; padding: 0; height: 36px; display: inline-flex; } #wrapper-filter { background-color: #000; width: 760px; height: auto; margin: 30px auto; border-radius: 30px; box-sizing: border-box; } #filter-bar li { width: 190px; background-color: transparent; text-align: center; list-style-type: none; z-index: 10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px; line-height: 36px; } .pill { position: absolute; width: 190px; height: 38px; background-color: #39c; border-radius: 30px; color: #212121: z-index: 10; border: 5px solid #eee; box-sizing: border-box; } .filter-option { transition: color 500ms; color: #fffefe; } #filter-bar.all .pill { margin-left: 0px; transition: margin-left 200ms ease; } #filter-bar.cars .pill { margin-left: 190px; transition: margin-left 200ms ease; } #filter-bar.animals .pill { margin-left: 380px; transition: margin-left 200ms ease; } #filter-bar.fruits .pill { margin-left: 570px; transition: margin-left 200ms ease; } .all.active, .cars.active, .animals.active, .fruits.active { color: #FFD700; transition: color 200ms; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section"> <div id="wrapper-filter"> <ul id="filter-bar"> <span class="pill"></span> <li class="filter-option all active" data-target-filter="all">All</li> <li class="filter-option cars" data-target-filter="cars">Shoes</li> <li class="filter-option animals" data-target-filter="animals">Toys</li> <li class="filter-option fruits" data-target-filter="fruits">Fruits</li> </ul> </div>