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/

希望这可以帮助

---