CSS转换仅在FF和Chrome中有效一次

Question

我在CSS transitions和其他浏览器上遇到问题。 以下小提琴在IE上可以正常工作（当您将鼠标悬停在左侧的项目上时，右侧的文本会正确淡入，并且您可以切换到其他项目，并且在每次新的悬停时仍会触发过渡），但是由于某种原因，FF选择左侧的一项后，Chrome将不再执行transition 。

jsfiddle链接

CSS转换代码：

.FAQItemText.active, .FAQItemTextDark.active, .solutionText.active {
    -webkit-transition: opacity 1500ms ease;
    -moz-transition: opacity 1500ms ease;
    -o-transition: opacity 1500ms ease;
    transition: opacity 1500ms ease;
    opacity: 1;
}

请任何人帮我修复它以使其在所有浏览器上均可使用吗？

谢谢

Answer 1

CSS 过渡无法重复。 如果您想重复一些，请使用CSS 动画

链接： http ： //www.w3schools.com/css/css3_animations.asp

Answer 2

您的代码过于复杂，并且有许多更简单的方法可以实现您想要实现的目标。 我重写了您的JS使其按其应有的方式工作，更改了CSS类和规则以更好地满足此目的，并且还对您的DOM了一些整理。

请查看下面的代码，在其中我解释了所做的更改：

 $(function(){ //select all the link elements and add needed event handlers: $(".leftSlidePanel>a") .mouseenter(preview) .mouseleave(preview) .click(selectSlide); }); function preview(event){ // This is the slide the element you clicked on links to: var targetSlide=$(event.currentTarget).attr("href"); // Let's make a selector to select the .leftItem inside the link you hovered and our target slide: var previewedItem=$(event.currentTarget).find(".leftItem").add(targetSlide); // and another selector to select all the .leftItems and .FAQItemTexts aparat from the ones being targeted: var hiddenItems=$(".leftItem, .FAQItemText").not(previewedItem); // Next add or remove classes from our selected items depending on wheter it was mouseeneter or mouseout: if(event.type=="mouseenter"){ previewedItem.addClass("previewed"); hiddenItems.addClass("hidden"); }else{ previewedItem.removeClass("previewed"); hiddenItems.removeClass("hidden"); } } function selectSlide(event){ // Prevent default behaviour of clicking a link: event.preventDefault(); // Remove class selected from all .leftItems and .FAQItemTexts: $(".leftItem, .FAQItemText").removeClass("selected"); // And add said class to targeted elements: $(event.currentTarget).find(".leftItem").add($(event.currentTarget).attr("href")).addClass("selected"); } 

 .slideContentContainer { width:70%; height:100%; min-width:1050px; margin-left:auto; margin-right:auto; padding-top:80px; } .leftSlidePanel { float:left; width:30%; padding-top:29px; } .rightSlidePanel { float:right; width:70%; padding-top:29px; } .leftItem { color: transparent; width: 100%; margin-top:0; text-align: left; padding-bottom: 23px; font-family:"Helvetica W01 Cn" !important; } .leftItem h4 { margin: 0; padding-top:5px; } /* this is how your links on the left will look like when they're selected or previewed: */ .leftItem.selected, .leftItem.previewed { color: rgb(227, 114, 22); } .dark.selected { color: rgb(49, 49, 50); } /* This is the style your FAQItemText has normally and when another item is being previewed: */ .FAQItemText, .FAQItemText.selected.hidden { width: 95%; opacity: 0; float:right; font-size: 20px; padding-top:29px; text-align: justify; color: rgb(227, 114, 22); font-family:"Helvetica W01 Cn" !important; display:none; } /* Instead of creating another class with almost the same rules as another, create a subclass: */ .FAQItemText.dark { color: rgb(49, 49, 50); } /* This is the style your FAQItemText will have when it's either selected or previewed: */ .FAQItemText.selected, .FAQItemText.previewed{ opacity: 1; display:block; /* Firefox and IE support animations without vendor prefixes, so -webkit- is the only one you'll need */ -webkit-animation: fade 1.5s 1; animation: fade 1.5s 1; } /* using display:block wile transitioning opacity can often doesn't give you the effect you'd want, but this can be fixed by using an animation instead: */ @-webkit-keyframes fade{ 0% {display:none; opacity:0;} 1% {display:block; opacity:0;} 100% {display:block; opacity:1;} } @-keyframes fade{ 0% {display:none; opacity:0;} 1% {display:block; opacity:0;} 100% {display:block; opacity:1;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section" id="faqs"> <div class="slideContentContainer"> <div class="leftSlidePanel"> <a href="#slideItem11"><div id="menuItem11" class="leftItem selected"><h4>1</h4></div></a> <a href="#slideItem12"><div id="menuItem12" class="leftItem"><h4>2</h4></div></a> <a href="#slideItem13"><div id="menuItem13" class="leftItem"><h4>3</h4></div></a> <a href="#slideItem14"><div id="menuItem14" class="leftItem"><h4>4</h4></div></a> <a href="#slideItem15"><div id="menuItem15" class="leftItem"><h4>5</h4></div></a> <a href="#slideItem16"><div id="menuItem16" class="leftItem"><h4>6</h4></div></a> </div> <div class="rightSlidePanel"> <div id="slideItem11" class="FAQItemText selected">BLAH 1 BLAH.</div> <div id="slideItem12" class="FAQItemText">BLAH 2 BLAH.</div> <div id="slideItem13" class="FAQItemText">BLAH 3 BLAH.</div> <div id="slideItem14" class="FAQItemText">BLAH 4 BLAH.</div> <div id="slideItem15" class="FAQItemText">BLAH 5 BLAH.</div> <div id="slideItem16" class="FAQItemText">BLAH 6 BLAH.</div> </div> </div> </div> 

Answer 3

谢谢大家的建议，经过一番谷歌搜索后，我发现这似乎可以解决问题。

所以我从这里改变了我的js代码：

function ShowSlide(slide, slideItem) {
    //Reset page
    resetAllHighlights(slide);
    //Show needed ones.
    jQuery('#slideItem' + slide + slideItem).show();
    jQuery('#slideItem' + slide + slideItem).addClass("active");
    jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}

对此：

function ShowSlide(slide, slideItem) {
    //Reset page
    resetAllHighlights(slide);
    //Show needed ones.
    jQuery('#slideItem' + slide + slideItem).show(0);
    jQuery('#slideItem' + slide + slideItem).addClass("active");
    jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}

现在，它可以在所有浏览器中使用。