CSS转换只能在FF和Chrome中使用一次

Question

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

jsfiddle link

的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

谢谢大家的建议，一会儿google搜索我碰到this来了之后这似乎是伎俩。

所以我改变了这个从我的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"); 
} 

，现在可在所有浏览器。

Answer 2

一个CSS 过渡不能重复。如果你想要的东西重复，使用CSS动画

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

Answer 3

您的代码过于复杂，有做你想达到什么样的更简单的方式。我重写了您的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>