javascript - CSS 动画不适用于内联显示属性？

Question

正如标题所说，我的 CSS 动画不能与 display: inline 一起正常工作。属性(property)......我在这里做错了什么？

我已将范围缩小到下面提供的这段给我带来麻烦的 css 代码。如果我提供所有代码，由于它非常冗长，因此实际上需要很长时间才能浏览 - 但是，如果您需要更多，请告诉我。

无论如何，在 HTML 部分，我有类 navcontent与 style="display: none;"看起来像这样:<div id="all" class="navcontent" style="display: none;"></div>

I need that bit of html to be hidden as the navcontent class also acts as tabs that once you click upon, the data/content within will appear in a specific container that's fixed (which any tab clicked the data/content appears/消失在同一个特定容器中)...

话虽这么说，我也对那个特定的容器应用了一些动画，但在使动画与 display: inline 一起工作时遇到了麻烦......

没有 display: inline，动画效果很好，但如果您单击另一个选项卡，应该显示的内容却不存在。所以我想你可以说我处于一个 catch22 的情况......

使用 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; 转换元素 - 请改用 inline-block:

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

这在相关specification中有明确说明。 :

可变形元素

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

请注意，atomic inline-level element 是指 inline-block