Question

所以，最近我发现我可以使用css：transition来制作更流畅的网页。

然而，当我去Mozilla Firefox和IE11测试我的网站时，他们都有一些奇怪的小错误，这些错误会破坏我想要制作的网站的“平滑性”。

Chrome是我的网站应该行动的一个示例。有4个函数和6个css转换。

功能完美无缺，问题如下：

在IE中（11并且很可能更低）：id div“main_wrapper”中的css转换无法正常工作。它会立即改变宽度，而不是像我要求的那样花1.5秒。原因是这个。左侧的导航栏宽度为19％，左侧为浮动。 “main_wrapper”宽度为80％，向右浮动。如果“main_wrapper”div立即增加/改变为calc（100％-1px）宽度，则它会在它们之间留下1％的间隙，然后它将被向下推，直到导航栏完成将其宽度降低到0.1px。这基本上破坏了我的功能的全部要点:(我不知道如何解决它。

在Mozilla Firefox中：在这个浏览器中有一个类似的错误，除了不那么严重，而不是在1.5秒内从“#Nav＃About，＃Work，＃Contact”过渡“字母间距”，它是立即行动。此外，这使我的网站看起来不那么柔滑。

似乎这些浏览器根本就没有读取这些转换，因为它们正在做其他转换就好了，我想知道我做错了什么，因为这对我来说相对较新。这是网站直播：Paxframe

HTML：

<title>Bryan the Lion</title>
</head>
<body>
    <script type="text/javascript">
    function bla(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100px";
        myElement.style.width = "0.1px";
        myElement2.style.opacity = "0.0" ;

    }
    function bla2(){
        var myElement = document.querySelector("#nav");
        var myElement2 = document.querySelector("#nav ul") ;
        myElement2.style.marginTop = "100";
        myElement.style.width = "19%";
        myElement2.style.opacity = "1.0" ;
    }
    function keepWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "calc(100% - 1px)";
    }
    function revertWrapper(){
        var myElement2 = document.querySelector("#main_wrapper") ;
        myElement2.style.width = "80%";
    }
    </script>

    <div id = "header" onmouseover= "bla2(),revertWrapper()">
        <div id="imgdiv"><img src="images/Pax_Frame.png"></div>
    </div>
    <div id ="nav" onmouseover = "bla2(),revertWrapper()">
        <ul>
            <li id = "About" onclick=   "$('#main_inner1').animatescroll({element:'#main'});">About<a ></a></li>
                <li id = "Work" onclick= "$('#main_inner2').animatescroll({element:'#main'});">Work<a href="#" ></a></li>
                <li id = "Contact" onclick= "$('#main_inner3').animatescroll({element:'#main'});">Contact<a href="#" ></a></li> 
            </ul>
    </div>  
    <div id = "main_wrapper" onmouseover = "bla(),keepWrapper()" >
        <div id ="main">
        <div id = "main_inner1" >
        <div style = "width:100% ; height: 250px ; font- size: 140% ;">
                    <p style = "margin-left:5% ;">
                        To us the m</p>
            </div>
            <div class = "floatleft" style = "margin-left:5%;">
                    <div class = "textDiv"><p> 
                    <span style = "color:#0000FF ;">we have
                                             that special touch.
                    </span></p>
                    </div>
                </div>
                <div class = "floatleft">

                </div>
                <div class = "floatleft" >

                </div>
            </div>
            <div id = "main_inner2" >
                <p>some div2</p>
            </div>  
            <div id = "main_inner3">
                <p>some div3</p>
            </div>  
        </div>
    </div>


</body>


</html>

CSS：

body{
height: 100% ; 
}
@font-face {
font-family: "Exo";
src: url(fonts/Exo-Regular.otf) format("truetype");
}
@font-face{
font-family: "Dev";
src: url(fonts/devroye.ttf) format("truetype");
}
a{text-decoration: none;}
#header{
height: 98px ;
max-height: 20% ;
width: 100% ;
color: white ;
}
#header #imgdiv{
margin: 0 auto ;
width: 220px ;
height: 90px ;
}
#main_wrapper{
height: calc(100% - 100px );
float: right;
width: 80%;
overflow: hidden;
transition:width 1.5s;
-webkit-transition:width 1.5s;

}
#main_wrapper #main{
width: 103%;
height: 100%;
overflow-y:scroll; 
}
#main_inner1{
background: rgba(192,192,192 , 0.1) ;
height: 1000px ;
width: 100%;
background-repeat: repeat;
}
#main_inner1 .floatleft{
border: dashed 2px #e0e3e5 ;
height: 30% ;
width: 30% ;
float: left;
font-family: Anton ;
}
#main_inner1 .floatleft:hover{
background: #CEE3F6 ;
border: solid 2px white ;
}
#main_inner1 .floatleft .textDiv{
width: 300px ;
height: 150px ;
margin: 0 auto ;
font-size: 140% ;
padding: 5px ;
}
#main_inner2{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#main_inner3{
height: 1000px ;
width: 100% ;
background: #7994a7 ;
}
#nav{
float: left ;
width: 19% ;
height: 80% ;
-webkit-transition:width 1.5s; /* For Safari 3.1 to 6.0 */
transition:width 1.5s;
font-family: Exo ;

}
#nav ul{
margin-top: 100px ;
text-align: center;
-webkit-transition:opacity 1.3s; /* For Safari 3.1 to 6.0 */
transition:opacity 1.3s;

}
#nav ul li a{
display: block
cursor: pointer;;
height: 10px ;


}
#nav #About{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #About:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Work{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
 }
#nav #Work:hover{
color: red ;
letter-spacing: 18px ;
}
#nav #Contact{
cursor: pointer;
-webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
transition:letter-spacing 1.5s;
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

Answer 1

好的，所以我想出来了。

当通过像keepWrapper（）这样的函数应用时，IE似乎没有读取calc（100％ - 1px）。这就是造成IE问题的原因。为了使它工作，我只需重新制作所有的宽度。

调用keepWrapper（）时：

nav是1％，
差距为0％，
main_wrapper是98％和1％margin-right

调用revertWrapper（）时：

nav是19％
差距为1％
main_wrapper为79％且仍有1％的保证金

使用Mozilaa Firefox的问题是Firefox没有读取默认值。这样：

#nav #Contact{
    cursor: pointer;
    -webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
    transition:letter-spacing 1.5s;
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

不得不重写为：

#nav #Contact{
    cursor: pointer;
   -webkit-transition:letter-spacing 1.5s; /* For Safari 3.1 to 6.0 */
    transition:letter-spacing 1.5s;
    letter-spacing: 0px ; /*must do this for Firefox */
}
#nav #Contact:hover{
color: red ;
letter-spacing: 18px ;
}

Answer 2

正如Bryan所说，当使用calc（）值作为转换到/来自的值时，IE11似乎有一个错误。

我打开了一个错误报告，其中包含一个jsfiddle：http://connect.microsoft.com/IE/feedback/details/868216/cannot-use-css-calc-as-value-for-css-transition-ie11。仍在等待他们的反馈。

[抱歉，我们不想创建一个全新的答案，但还不能发表评论。]

IE11和Mozilla css过渡的奇怪之处

2 个答案: