添加<脚本>元素时,CSS 翻译过渡停止工作
CSS translate transition stops working when adding <script> element
<!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;
}
只要我在主页中添加脚本标签过渡停止工作,但淡入继续工作我不知道为什么谢谢!
我遇到了同样的问题。以下解决方案对我有用。改变
<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-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- 如何在javascript上使用flak-babel进行翻译
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS 翻译不适用于数学函数
- 纯CSS网站翻译
- 是否可以从JavaScript更改CSS翻译距离值
- 添加<脚本>元素时,CSS 翻译过渡停止工作
- CSS从中心翻译回来
- CSS翻译了移动设备上大DOM的性能问题
- 如何禁用弹出式谷歌翻译HTML CSS
- jQuery CSS在不改变翻译的情况下设置子元素的比例
- 使用javascript激活css动画/翻译