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

CSS 转换无法重复。如果你想要重复的东西，请使用CSS 动画

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

Answer 2

您的代码过于复杂，并且有更简单的方法来完成您尝试实现的目标。我重新编写了您的JS，让它按照应有的方式工作，修改了您的CSS课程和规则以更好地适应目的并清理了DOM一点点。

查看下面的代码，我已经解释了我所做的更改：

＆＃13;

$(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");
}

＆＃13;

.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;}
}

＆＃13;

<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>

＆＃13;

Answer 3

谢谢大家的建议，经过一段时间的谷歌搜索，我遇到了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");
}

它现在适用于所有浏览器。

CSS转换仅适用于FF和Chrome

3 个答案: