CSS動畫不能與內聯顯示屬性一起使用嗎？

Question

如標題所述，我的CSS動畫無法在display: inline正常工作display: inline屬性...我在這里做錯了什么？

我將其范圍縮小到下面提供的這部分CSS代碼，這給了我麻煩。 如果我提供所有代碼，那么這將花費很長的時間，因為它很長-但是，如果您需要更多信息，請告訴我。

無論如何，在HTML部分中，我的類navcontent具有style="display: none;" 看起來像這樣： <div id="all" class="navcontent" style="display: none;"></div>

我需要隱藏html的那一部分，因為navcontent類還充當選項卡，一旦您單擊，其中的數據/內容將顯示在固定的特定容器中（單擊該選項卡的任何選項卡數據/內容將顯示/消失在相同的特定容器）...

因此，盡管如此，我也已將某些動畫應用於該特定容器，但是在使動畫與顯示一起工作時遇到了麻煩：內聯...

如果沒有display：inline，則動畫效果很好，但是如果單擊另一個選項卡，則應該顯示的內容不存在。 所以我想你可以說我陷入了困境...

使用display：inline時，動畫不起作用，但是選項卡起作用並按應有的方式顯示。

CSS：

.navcontent ul {
  width: 554px;
  height: 299px;
  padding: 0;
  margin: 0;
  list-style: none;
    -moz-perspective: 400px;
    -webkit-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 9997;
}
.navcontent ul li {
  width: 536px;
  height: 140px;
  margin: 5px auto 10px auto;
  /* display: inline; */ /* Issues - If display is off, works as intended but other tabs do not show up at all if clicked.  If display is enabled, animation doesn't work... */
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  position: relative;
  z-index: 2;
}
.navcontent ul li:nth-child(odd) {
  background: rgba(204, 204, 204, 0.07);
    background: -moz-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(204, 204, 204, 0.07)));
    background: -webkit-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
    background: -o-linear-gradient(transparent, rgba(204, 204, 204, 0.07));
}

有任何想法嗎？

更新：

JS

$(function () {
    $('#options ul li a').on('click', function (e) {
        e.preventDefault();
        if ($(this).hasClass('active')) {
            return;
        } else {
            var currentitm = $('#options ul li a.active').attr('id');
            if (currentitm == 'division_all_link') {
                var currentlist = $('#division_all');
            }
            if (currentitm == 'division_latest_link') {
                var currentlist = $('#division_latest');
            }
            if (currentitm == 'division_featured_link') {
                var currentlist = $('#division_featured');
            }
            if (currentitm == 'division_popular_link') {
                var currentlist = $('#division_popular');
            }

            var newitm = $(this).attr('id');
            if (newitm == 'division_all_link') {
                var newlist = $('#division_all');
            }
            if (newitm == 'division_latest_link') {
                var newlist = $('#division_latest');
            }
            if (newitm == 'division_featured_link') {
                var newlist = $('#division_featured');
            }
            if (newitm == 'division_popular_link') {
                var newlist = $('#division_popular');
            }

            $('#options ul li a').removeClass('active');
            $(this).addClass('active');
            $(currentlist).fadeOut(320, function () {
                $(newlist).fadeIn(200);
            });
        }
    });
});

Answer 1

您不能使用display: inline; 來轉換元素display: inline; -使用inline-block代替：

.navcontent ul li {
    display: inline-block;
   /* .. */
    transform: translateZ(0);
}

這在相關規范中有明確說明 ：

可變形元素

可轉換元素是以下類別之一的元素：

一個元素，其布局由CSS框模型控制，該CSS框模型可以是塊級或原子內聯級元素，或者其display屬性可以計算為table-row，table-row-group，table-header-group，table-footer組，表格單元格或表格標題[CSS21]

SVG名稱空間中的一個元素，不受CSS盒模型的控制，該CSS盒模型的屬性為transform，'patternTransform'或gradientTransform [SVG11]。

請注意， 原子內聯級別元素是指inline-block