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

好吧，所以我有一個投資組合，我想排序。當您點擊導航中的其中一個鏈接時，它將根據分配的ID對圖像進行排序。我有JQuery函數工作，但它不會動畫。另外容器中的圖像也不會動畫，就像所有的CSS動畫都關閉了一樣......我也使用引導。CSS不使用Jquery動畫添加/刪除類

我試圖建立這個有趣的基本上，我遇到了與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

來源

2017-04-12 Jiroscopes

display: none不是部分的動畫列表。改爲使用opacity: 0。

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

來源

2017-04-12 04:01:10

這會不會保留列有，但只是不可見。它會佔用空間仍然正確？ – Jiroscopes

如果您使用的是jquery，那麼也可以使用'hide（）'函數 –

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

來源

2017-04-12 04:06:33

即使不可見，塊仍佔用空間。有什麼辦法可以讓他們離開，列和所有，然後重新出現？ – Jiroscopes

放置高度：0添加class .hide .hide {height：0;不透明度：0; } –

CSS的「顯示」屬性不WO動畫中的rks。因此，嘗試這個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; 
 
}

來源

2017-04-12 04:51:13

由於CSS轉換不會對顯示性能在這裏工作是一個純粹的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/

希望這有助於

來源

2017-04-12 05:23:01

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

回答

相關問題