添加时CSS转换过渡停止工作<script> element

Question

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="assign0CSS.css">
        <title> Songs </title>


    </head>
    <body>

        <div id='headerBar'>

        </div>
        <div id="everything" >

            <div id="loginContainer">
                <div id='topPart'>
                        <h2 id="Welcome"> Welcome   <img  id="add" src="add.png" alt="login" > </h2>

                </div> 
                <form action="#" method= "POST" id="login" name="login">
                    <input type="text" id="Username" name="Username" placeholder="Username"> <br />
                    <input type="password" id="Password" name="Password" placeholder="Password"> <br />
                    <input type="submit" id="SubmitForm" value="Sign In">
                </form>
            </div>
        </div>

        <div id="everything2" >

            <div id="notRegistered" >

                <div id="topPart2">

                        <h2 id='Welcome2' >First time? <img  id="heart" src="heart.png" alt="heart" > </h2>
                </div>

                    <form action="#" method= "POST" id="register" name="register" onSubmit="return validateForm()">

                        <input type="text" id="emailAddress" name="emailAddress" placeholder="Email Address" style="margin-top : 2px;" > <br />

                        <input type="text" id="username2" name="username2" placeholder="Username"> <br />

                        <input type="password" id="password2" name="password2" placeholder="Password"> <br />

                        <input type="password" id="password22" name="password22" placeholder="Confirm Password"> <br />

                        <input type="submit" id="signUp" name="signUp" value="Sign up" > <br />

                    </form>


            </div>
        </div>


        <div id="rightSide">

            <h2 id="SOTW" > Songs of the week </h2>

             <img id="pic1" src="allOfMe.jpg" alt="pic1" >   
             <img id="pic2" src="problem.jpg" alt="pic2" > <br /> 
             <img id="pic3" src="maps.jpg" alt="pic3" > 
             <img id="pic4" src="stayWithMe.jpg" alt="pic4" > <br />

        </div> 


    </body>
</html>

所以我将这段代码作为主页，在CSS中，我进行了一些转换

#everything, #everything2
{

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;

            -ms-transform: translatey(20px); /* IE 9 */
    -webkit-transform: translatey(20px); /* Chrome, Safari, Opera */
    transform: translatey(20px);

        -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;


}

当我在首页中添加脚本标签后，过渡功能便停止工作，但是淡入淡出功能仍在继续工作，我不知道为什么谢谢你！

Answer 1

我遇到了同样的问题。 以下解决方案对我有用。 更改

<link rel="stylesheet" type="text/css" href="assignOCSS.css" />

成

    <?php 
    $random = rand(0,999999);
    echo '<link rel="stylesheet" href="assignOCSS.css'.$random.'">';
    ?>

哦，如果您服务器上的样式表隐藏在地图中的某处，则将其转换为：

    <?php 
    $random = rand(0,999999);
    echo '<link rel="stylesheet" href="www.mydomain.com/myfolder/assign0CSS.css'.$random.'">';
    ?>

我希望这也对您有用！

添加时CSS转换过渡停止工作<script> element

问题描述

1 个解决方案

解决方案1
0 2014-08-28 20:22:40

添加时CSS转换过渡停止工作<script> element

问题描述

1 个解决方案

解决方案1 0 2014-08-28 20:22:40

解决方案1
0 2014-08-28 20:22:40