javascript - 如何使用 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 而不是示例 .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>