图片按类别排序

问题描述 投票：0回答：1

我正在尝试制作一个图片库，让用户可以按类别（陆地、海洋、动物等）对选项进行排序。我写了一个小例子。

我的目标：是一旦用户选择（点击）他想要排序的类别，网站将只显示该特定类别的图片，而其他“不需要的”图片将慢慢消失并向下移动。一旦用户更改选择，“丢失”的图片将从下方重新出现并向上直至到达目的地。

我确实设法制作了进出动画，并在动画结束后保持图像隐藏，但只有在所有相关图片消失后，排序后的图片才会“跳”到它们的位置，而不是平滑地滑向它们预期的位置。

现在我认为我当前的问题是缺少动画，但也许我在CSS或JS中写了一些错误的东西。

const filterContainer = document.querySelector('.data-filters');
const photoItems = document.querySelectorAll('.photo-item');

filterContainer.addEventListener('click', (event) => {

  filterContainer.querySelector('.active-filter').classList.remove('active-filter');
  event.target.classList.add('active-filter');

  const filter = event.target.getAttribute('data-filter');

  photoItems.forEach((item) => {
    if (item.getAttribute('data-filter') == filter || filter == 'all') {
      item.classList.remove('photo-out')
      item.classList.add('photo-in')
    } else {
      item.classList.remove('photo-in')
      item.classList.add('photo-out')
    }
  })

})
.line-list li {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.active-filter {
  color: blue;
}

@keyframes go-out {
  0% {
    top: 0px;
    opacity: 1.0
  }
  100% {
    top: 600px;
    opacity: 0;
    display: none
  }
}

@keyframes go-in {
  100% {
    top: 0px;
    opacity: 1.0
  }
  0% {
    top: 600px;
    opacity: 0;
    display: block
  }
}

.photo-out {
  animation: go-out 1.2s forwards;
}

.photo-in {
  animation: go-in 1.2s forwards;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <section id='photo_wall'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 data-filters'>
          <ul class='line-list'>
            <li class='active-filter' data-filter='all'> All photos </li>
            <li data-filter='land'> Land </li>
            <li data-filter='sea'> Sea </li>
            <li data-filter='animals'> Animals </li>
          </ul>
        </div>
      </div>
      <div class='row'>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='land'>
          <img src='https://fastly.picsum.photos/id/807/200/200.jpg?hmac=Y8gayvNItiQYxP_Pd-2un9GH09XuyJdIZOQPw6K9QsI'>
        </div>
        <div class='col-md-3 col-sm-6 photo-item p-4 photo-in' data-filter='animals'>
          <img src='https://fastly.picsum.photos/id/659/200/200.jpg?hmac=kFpdD3XTBGwPUAH1tD-AiWigstjIX8WGIcyySuVQIvE' class='animals'>
        </div>
        <div class='col-md-3 col-sm-6 photo-item p-4 photo-in' data-filter='land'>
          <img src='https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw' class='land'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='sea'>
          <img src='https://fastly.picsum.photos/id/883/200/200.jpg?hmac=evNCTcW3jHI_xOnAn7LKuFH_YkA8r6WdQovmsyoM1IY' class='sea'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='animals'>
          <img src='https://fastly.picsum.photos/id/237/200/200.jpg?hmac=zHUGikXUDyLCCmvyww1izLK3R3k8oRYBRiTizZEdyfI' class='animals'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='sea'>
          <img src='https://fastly.picsum.photos/id/653/200/200.jpg?hmac=tZtho3csFdJ2rLHTTlT7WhXtDwbXgJNIIUvOQQb2dIo' class='sea'>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

javascript html jquery css sorting
1个回答
0
投票

并非微不足道。 也许可以玩这个

@keyframes go-out {
  0% {
    transform: translateX(0);
    opacity: 1.0;
  }
  100% {
    transform: translateX(-100%); /* Move left by its own width */
    opacity: 0;
  }
}

@keyframes go-in {
  0% {
    transform: translateX(-100%); /* Start left by its own width */
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1.0;
  }
}


const filterContainer = document.querySelector('.data-filters');
const photoItems = document.querySelectorAll('.photo-item');

filterContainer.addEventListener('click', (event) => {

  filterContainer.querySelector('.active-filter').classList.remove('active-filter');
  event.target.classList.add('active-filter');

  const filter = event.target.getAttribute('data-filter');

  photoItems.forEach((item) => {
    if (item.getAttribute('data-filter') == filter || filter == 'all') {
      item.classList.remove('photo-out')
      item.classList.add('photo-in')
    } else {
      item.classList.remove('photo-in')
      item.classList.add('photo-out')
    }
  })

})
.line-list li {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.active-filter {
  color: blue;
}

@keyframes go-out {
  0% {
    transform: translateX(0);
    opacity: 1.0;
  }
  100% {
    transform: translateX(-100%); /* Move left by its own width */
    opacity: 0;
  }
}

@keyframes go-in {
  0% {
    transform: translateX(-100%); /* Start left by its own width */
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1.0;
  }
}



.photo-out {
  animation: go-out 1.2s forwards;
}

.photo-in {
  animation: go-in 1.2s forwards;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <section id='photo_wall'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 data-filters'>
          <ul class='line-list'>
            <li class='active-filter' data-filter='all'> All photos </li>
            <li data-filter='land'> Land </li>
            <li data-filter='sea'> Sea </li>
            <li data-filter='animals'> Animals </li>
          </ul>
        </div>
      </div>
      <div class='row'>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='land'>
          <img src='https://fastly.picsum.photos/id/807/200/200.jpg?hmac=Y8gayvNItiQYxP_Pd-2un9GH09XuyJdIZOQPw6K9QsI'>
        </div>
        <div class='col-md-3 col-sm-6 photo-item p-4 photo-in' data-filter='animals'>
          <img src='https://fastly.picsum.photos/id/659/200/200.jpg?hmac=kFpdD3XTBGwPUAH1tD-AiWigstjIX8WGIcyySuVQIvE' class='animals'>
        </div>
        <div class='col-md-3 col-sm-6 photo-item p-4 photo-in' data-filter='land'>
          <img src='https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw' class='land'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='sea'>
          <img src='https://fastly.picsum.photos/id/883/200/200.jpg?hmac=evNCTcW3jHI_xOnAn7LKuFH_YkA8r6WdQovmsyoM1IY' class='sea'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='animals'>
          <img src='https://fastly.picsum.photos/id/237/200/200.jpg?hmac=zHUGikXUDyLCCmvyww1izLK3R3k8oRYBRiTizZEdyfI' class='animals'>
        </div>
        <div class='col-md-3 photo-item p-4 photo-in' data-filter='sea'>
          <img src='https://fastly.picsum.photos/id/653/200/200.jpg?hmac=tZtho3csFdJ2rLHTTlT7WhXtDwbXgJNIIUvOQQb2dIo' class='sea'>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.