Javascript CSS动画没有'；无法使用内联显示属性？

正如标题所说，我的CSS动画无法与

display:inline

属性正常工作……我在这里做错了什么

我已经把它缩小到下面提供的一些css代码，这给我带来了麻烦。如果我提供了所有的代码，它会花很长的时间来查看，但是，如果你需要更多，请告诉我

无论如何，在HTML部分，我有一个类

navcontent

，带有

style=“display:none；”

，它看起来像这样：

我需要隐藏这一点html，因为navcontent类还充当选项卡，一旦单击，其中的数据/内容将显示在一个固定的特定容器中（任何单击该容器的选项卡都会在同一特定容器中显示/消失）

这么说来，我也在那个特定的容器上应用了一些动画，但是我很难让动画与display:inline一起工作

如果没有display:inline，动画效果会很好，但是如果单击另一个选项卡，应该显示的内容就不存在了。所以我想你可以说我的处境很尴尬

使用display:inline时，动画不起作用，但选项卡起作用，并且看起来应该是这样的

CSS:

有什么想法吗

更新：

JS

---

不能使用

显示：内联转换元素-改用内联块：

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

这在相关文件中有明确说明：

可转换元素

可转换元素是以下类别之一的元素：

布局由CSS框模型控制的元素，该模型是
块级或原子内联级元素，或其显示
属性计算为表行、表行组、表标题组，
表尾组、表单元格或表标题[CSS21]

元素
SVG名称空间，不受具有
属性变换、“模式变换”或渐变变换[SVG11]

请注意，原子内联级元素是指
内联块
，使用
内联块
可以让我现在看到动画，但我遇到了其他选项卡的问题（单击后），该特定容器上的内容没有显示…你能发送链接吗？如果看不到所有代码或演示，很难提供帮助。它位于Divisions容器中。正如您将注意到的，动画从现在开始工作，但是，如果您单击左上角的“选项”选项卡并选择“最新”选项卡，然后尝试向下滚动，其中的内容将消失…@user2732875:我现在看到了。给我一点时间。但如果我把
display:inline
放在那里，每个选项卡中的内容都会正常工作-唯一的问题是，如果实现了动画，动画将无法工作。。。
$(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);
            });
        }
    });
});

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