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"))
    })
})

标签： javascriptjqueryhtmlcss

Answer 1

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

• 菜单宽度从 570px 更改为 760px 以考虑 4 个元素而不是 3 个（它可以以动态方式完成以考虑任意数量的项目）
• 项目宽度不变（190px）
• onclick=filterSelection自定义方法被删除。JS 使用data-target-filterattr检索要应用的类
• 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>