CSS不使用Jquery添加/刪除類設置動畫

Question

好的，所以我有一個要排序的投資組合。 當您單擊導航中的鏈接之一時，它將根據分配的ID對圖像進行排序。 我有JQuery函數正常工作，但不會設置動畫。 同樣，保存圖像的容器也不會設置動畫，就像所有CSS動畫都已關閉一樣。我也正在使用bootstrap。

我基本上是為了好玩而設計，我遇到了CSS無法動畫化的麻煩。 我已經看過很長時間了，可能很簡單，但我沒有看到它。

CSS：

.category-item{
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.hide{
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

JQUERY：

$(document).ready(function(){
// Portfolio Sort
$(".categorys").click(function(){
  var category = $(this).attr('id');
  //alert(category); //test nav
  if (category == "featured") {
      $(".category-item").addClass("hide");
      setTimeout(function(){
        $(".category-item").removeClass("hide");
    }, 300);
  }
 })
});

這是演示JSFiddle （沒有圖像，但是基本上它應該使消失並返回的動畫。）

Answer 1

display: none是可動畫列表的一部分。 使用opacity: 0代替。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

Answer 2

顯示器show和顯示none在CSS動畫不工作

試試這個代碼

 $(document).ready(function(){ // Portfolio Sort $(".categorys").click(function(){ var category = $(this).attr('id'); //alert(category); //test nav if (category == "featured") { $(".category-item").addClass("hide"); setTimeout(function(){ $(".category-item").removeClass("hide"); }, 300); } }) }); 

 /*Portfolio Start*/ .portfolio{ height: 1000px; transition: all 1s ease; } .portfolio-head{ font-family: 'Lato', sans-serif; font-size: 2.5em; font-style: italic; text-align: center; } .portfolio-nav-holder{ width: 600px; height: 20px; margin: 0 auto; } .portfolio-nav{ color: black; list-style: none; text-align: center; width: 450px; height: 100%; margin: 0 auto; } .portfolio-nav a{ text-decoration: none; float: left; margin-right: 15px; color: black; } .portfolio-nav a:hover{ color: #f7c845; transition: all 0.2s ease; } .portfolio-row{ padding-top: 80px; } .portfolio-img{ position: relative; } .portfolio-img > img{ width: 100%; height: 100%; background-color:red; } .portfolio-overlay{ background-color: #f7c845; z-index: 100; position: absolute; height: 100%; width: 100%; display: none; } .portfolio-overlay > h3 { text-align: center; color: #212121; font-size: 2em; font-weight: 700; padding-top: 80px; } .portfolio-overlay > p { text-align: center; color: #212121; padding: 20px 40px; } .portfolio-row-2{ padding-top: 20px; } .container{ transition: all 2s ease !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .category-item{ opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .hide{ opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="portfolio-head">PORTFOLIO</h2> <div class="portfolio-nav-holder"> <ul class="portfolio-nav"> <li><a class="categorys" id="featured">Featured</a></li> </ul> </div> </div> </div> <div class="row portfolio-row"> <div class="col-md-4 col-sm-4 col-xs-4 category-item"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #1</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_1.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #2</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_2.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #3</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_3.jpg" alt="portfolio-image"> </div> </div> </div> <div class="row portfolio-row-2"> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #4</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_4.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #5</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_5.jpg" alt="portfolio-image"> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 category-item featured"> <div class="portfolio-img"> <div class="portfolio-overlay"> <h3>Project #6</h3> <p>This is the home of my first project. I made this thing.</p> </div> <img src="assets/images/port_6.jpg" alt="portfolio-image"> </div> </div> </div> </div> 

Answer 3

css的“ display”屬性不適用於動畫。 因此，請嘗試使用此CSS代碼，

 .category-item{ opacity: 1; visibility: visible; max-height: 100%; display: block; overflow: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .hide{ opacity: 0; max-height: 0; visibility: hidden; } 

Answer 4

由於CSS過渡不適用於display屬性，因此這里是一個純jquery解決方案，可以為您完成此操作。

請從您的CSS中刪除過渡，並更改您的功能，如下所示。

$(document).ready(function(){
  // Portfolio Sort
  $(".categorys").click(function(){
      var category = $(this).attr('id');
      //alert(category); //test nav
      if (category == "featured") {
          $(".category-item").hide(500);
          setTimeout(function(){
            $(".category-item").show(500);
        }, 3000);
      }
  })
});

您可以根據需要更改超時並顯示隱藏延遲。

這是一個工作的小提琴。 https://jsfiddle.net/nhdo3opo/5/

希望這可以幫助

---