As the title says, my CSS Animation doesn't work properly with the display: inline property...What am I doing wrong here?
I have narrowed it down to this bit of css code provided below that is giving me the troubles. If I provide all the code, it would literally take forever to look through as it's quite lengthy - however, if you need more let me know.
Anyway, in the HTML part, I have the class navcontent with style="display: none;" which looks like this: <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/disappears in the same specific container)...
So with that being said, I have also applied some animation to that specific container but am having troubles making the animation work with display: inline...
Without the display: inline, the animation works great, but if you click on another tab, the content that is supposed to appear - isn't there. So I guess you can say I'm in a catch22 situation...
With the display: inline, the animation doesn't work, BUT the tabs work and appear like they should.
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));
}
Any Ideas -or- thoughts?
UPDATE:
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);
});
}
});
});
As the title says, my CSS Animation doesn't work properly with the display: inline property...What am I doing wrong here?
I have narrowed it down to this bit of css code provided below that is giving me the troubles. If I provide all the code, it would literally take forever to look through as it's quite lengthy - however, if you need more let me know.
Anyway, in the HTML part, I have the class navcontent with style="display: none;" which looks like this: <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/disappears in the same specific container)...
So with that being said, I have also applied some animation to that specific container but am having troubles making the animation work with display: inline...
Without the display: inline, the animation works great, but if you click on another tab, the content that is supposed to appear - isn't there. So I guess you can say I'm in a catch22 situation...
With the display: inline, the animation doesn't work, BUT the tabs work and appear like they should.
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));
}
Any Ideas -or- thoughts?
UPDATE:
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);
});
}
});
});
1 Answer
Reset to default 6You cannot transform elements with display: inline; - use inline-block instead:
.navcontent ul li {
display: inline-block;
/* .. */
transform: translateZ(0);
}
This is stated clearly in the related specification by W3 & MDN:
transformable element
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 putes 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].
Note that atomic inline-level element is referring to inline-block