CSS不使用Jquery添加/删除类动画答案

【问题标题】：CSS not animating with Jquery Add/Remove ClassCSS不使用Jquery添加/删除类动画
【发布时间】：2017-04-12 13:23:01
【问题描述】：

好的，所以我有一个我正在尝试排序的投资组合。当您单击导航中的链接之一时，它将根据分配的 ID 对图像进行排序。我有 JQuery 函数工作，但它不会动画。保存图像的容器也不会动画，就像所有的 CSS 动画都被关闭了......我也在使用引导程序。

我基本上是为了好玩而构建它，但我遇到了一个障碍，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 （没有图像，但基本上它应该动画消失和回来。）

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

display: none 不是动画列表的一部分。请改用opacity: 0。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

【讨论】：

这不会将列保留在那里但只是不可见。它会占用空间仍然正确吗？
如果你使用jquery，也可以使用hide()函数

【解决方案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>

【讨论】：

即使不可见，这些块仍会占用空间。有什么办法让它们消失，列和所有，然后重新出现？
添加类时放置 height:0 .hide .hide { height:0;不透明度：0； }

【解决方案3】：

css“显示”属性不适用于动画。所以试试这个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;
}

【讨论】：

【解决方案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/

希望对你有帮助

【讨论】：