Question

好的，我有一个我想要排序的投资组合。当您单击导航中的一个链接时，它将根据分配的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 （没有图像，但基本上它应该动画消失并回来。）

Answer 1

display: none不属于动画列表。请改用opacity: 0。

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

Answer 2

显示select CountryName,SubdivisionName from dbo.Locations where CountryName='COUNTRY'并显示{c}动画无效的show

试用此代码

none

$(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;
}

Answer 3

css＆＃34;显示＆＃34;属性不适用于动画。所以试试这个css代码，

＆＃13;

.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;
}

＆＃13;

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/

希望这有帮助

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

4 个答案: