Question

正如标题所说，我的CSS动画与display: inline属性无法正常工作......我在这里做错了什么？

我已经将它缩小到下面提供的这个css代码，这给我带来了麻烦。如果我提供了所有的代码，那么它会花费很长时间来查看，因为它非常冗长 - 但是，如果你需要更多代码，请告诉我。

无论如何，在HTML部分中，我的navcontent课程为style="display: none;"，如下所示：<div id="all" class="navcontent" style="display: none;"></div>

我需要隐藏一点html，因为navcontent类也可以作为标签，一旦你点击它，其中的数据/内容将出现在一个固定的特定容器中（任何标签点击了数据） / content在同一个特定容器中显示/消失）...

所以说到这一点，我也给那个特定的容器应用了一些动画但是让动画与显示器一起工作很麻烦：内联......

没有显示：内联，动画效果很好，但是如果你点击另一个标签，那么应该出现的内容就不存在了。所以我想你可以说我处在捕获22的情况......

使用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;转换元素 - 请改用内联块：

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

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

1 个答案: