Анимированные кнопки CSS

Question

$("button").click(function(){
  $("button").removeClass("selected");

  $(this).addClass("selected");

  var dataFilter = $(this).data('filter');

  if(dataFilter == "all") {
      $(".elements tr").show();
  }
  else
  {
    $(".elements tr").hide();
    $("." + dataFilter).show();
  }
});

Я создал анимацию для одной кнопки (ПОКАЗАТЬ ВСЕ), но эффект также отображается на секунду, чего у меня нетсделано стиль еще.Еще одна проблема здесь, когда я нажимаю вторую кнопку (NATURE), первая переходит в обычную кнопку.Как от этого избавиться.

.selected{
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.selected span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
.selected span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.selected:hover span {
  padding-right: 25px;
}

.selected:hover span:after {
  opacity: 1;
  right: 0;
}

<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>

Снимок экрана упомянутой проблемы ] 3

Answer 1

Трудно точно сказать, что происходит, потому что ваш код не воспроизводит проблему, с которой вы столкнулись.Однако у меня есть представление о том, что происходит.

Вы выбираете кнопку Показать все в классе .selected.Вполне вероятно, что при выборе кнопки «Природа» класс .selected удаляется из кнопки «Показать все» и применяется к кнопке «Природа».(Вы можете проверить это, проверив кнопки с помощью консоли разработчика браузеров и посмотрев, меняются ли классы при нажатии на них)

Если класс .selected чередуется между кнопками, вы можете добавить уникальныйКласс на кнопку Показать все и выберите его, используя этот класс.Однако, если у вас нет возможности добавить уникальный класс к кнопке Показать все, вы можете выбрать уникальный атрибут data-filter.

[data-filter="all"] {
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

[data-filter="all"] span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
[data-filter="all"] span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

[data-filter="all"]:hover span {
  padding-right: 25px;
}

[data-filter="all"]:hover span:after {
  opacity: 1;
  right: 0;
}

<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>