【发布时间】：2013-03-13 09:38:27
【问题描述】：
我正在尝试使用 CSS 在我的网站上为“div”的高度设置动画。
它在 FF 和 Safari 上完美运行，但在 Chrome 上它有一个奇怪的行为。
我有 4 个 'div'，单击它们时它们会拉伸以显示整个包含的文本，然后再次单击它们时它们会收缩并隐藏。在 Chrome 上，一旦我单击其中一个，它们就会全部展开到全高，然后，当动画结束时，返回到它们最初应该处于的高度。
您可以在以下位置看到：http://www.wefind-tech.com/WhatIsIt_ChromeV.html
有解决办法吗？
谢谢
埃雷兹
CSS 是：
.WeFind_Div_PunchLine::first-letter{
font-weight: bold;
font-size: 20px;
}
.WeFind_Div_PunchLine{
width: 95%;
line-height: 40px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
border: 1px solid #CCCCCC;
border-radius:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
box-shadow: 10px 10px 5px #CCCCCC;
-webkit-box-shadow: 10px 10px 5px #CCCCCC;
-moz-box-shadow: 10px 10px 5px #CCCCCC;
-o-box-shadow: 10px 10px 5px #CCCCCC;
}
.WeFind_Div_Contructed{
height: 0px;
overflow: hidden;
}
/*VERTICAL EXPAND element animation*/
@keyframes WeFimd_Anim_Expand{
from {height: 0px;}
to {height: 150px;}
}
@-moz-keyframes WeFimd_Anim_Expand /* Firefox */{
from {height: 0px;}
to {height: 150px;}
}
@-webkit-keyframes WeFimd_Anim_Expand /* Safari and Chrome */{
from {height: 0px;}
to {height: 150px;}
}
@-o-keyframes WeFimd_Anim_Expand /* Opera */{
from {height: 0px;}
to {height: 150px;}
}
/*VERTICAL CONTRUCT element animation*/
@keyframes WeFimd_Anim_Contruct{
from {height: 150px;}
to {height: 0px;}
}
@-moz-keyframes WeFimd_Anim_Contruct /* Firefox */{
from {height: 150px;}
to {height: 0px;}
}
@-webkit-keyframes WeFimd_Anim_Contruct /* Safari and Chrome */{
from {height: 150px;}
to {height: 0px;}
}
@-o-keyframes WeFimd_Anim_Contruct /* Opera */{
from {height: 150px;}
to {height: 0px;}
}
.WeFind_Div_Expand{
overflow: hidden;
animation-fill-mode: both;
animation: WeFimd_Anim_Expand 1s;
-moz-animation: WeFimd_Anim_Expand 1s; /* Firefox */
-moz-animation-fill-mode: both;
-webkit-animation: WeFimd_Anim_Expand 1s; /* Safari and Chrome */
-webkit-animation-fill-mode: both;
-o-animation: WeFimd_Anim_Expand 1s; /* Opera */
-o-animation-fill-mode: both;
}
.WeFind_Div_Contruct{
overflow: hidden;
animation-fill-mode: both;
animation: WeFimd_Anim_Contruct 1s;
-moz-animation: WeFimd_Anim_Contruct 1s; /* Firefox */
-moz-animation-fill-mode: both;
-webkit-animation: WeFimd_Anim_Contruct 1s; /* Safari and Chrome */
-webkit-animation-fill-mode: both;
-o-animation: WeFimd_Anim_Contruct 1s; /* Opera */
-o-animation-fill-mode: both;
}
HTML 是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WeFind web site, What is WeFind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./CSS/WeFindAnimations.css">
<link rel="stylesheet" type="text/css" href="./CSS/WeFind.css">
<script>
if (navigator.appName == 'Microsoft Internet Explorer') window.location = "./WhatIsIt_IEVer.html";
function ResetAllElement(ElementName){
var CurentElement = ElementName.substring(0,1);
for (var Index = 1; Index < 5; Index++){
if (Index != CurentElement && document.getElementById(Index + '_DivContent').getAttribute('class').indexOf('WeFind_Div_Expand') > 0){
document.getElementById(Index + '_DivContent').setAttribute('class', 'WeFind_Text_Body WeFind_Div_Contruct');
document.getElementById(Index + '_DivContentLineExpander').src = "./Images/ArrowDown.png";
}
}
}
function ToggleExpandContruct(ElementName){
if (document.getElementById(ElementName).getAttribute('class').indexOf('WeFind_Div_Expand') > 0){
document.getElementById(ElementName + 'LineExpander').src = "./Images/ArrowDown.png";
return('WeFind_Text_Body WeFind_Div_Contruct');
}
else{
document.getElementById(ElementName + 'LineExpander').src = "./Images/ArrowUp.png";
return('WeFind_Text_Body WeFind_Div_Expand');
}
}
</script>
</head>
<body>
<table class="WeFind_Table_Stretched">
<tr>
<td class="WeFind_Table_CellHorizontalSpacer170px"> </td>
<td class="WeFind_Table_Cell_PortrateText">
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('0_DivContent');">WeFind, A community obligated to create a safe living environment for all.</div>
<div id="0_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('1_DivContent'); document.getElementById('1_DivContent').setAttribute('class', ToggleExpandContruct('1_DivContent'));">
The power of "community bond" and "community commitment"
<img id="1_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="1_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
The WeFind community utilizes the power of "community bond" and "community commitment" to create a safe living environment for loved ones, the elderly and the challenged, a safe environment for everyone.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('2_DivContent'); document.getElementById('2_DivContent').setAttribute('class', ToggleExpandContruct('2_DivContent'));">
The power of the masses
<img id="2_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="2_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
WeFind uses the power of the masses to create a safety net, continuously alert and ready to provide both passive and active assistance to anyone in need. That net is widely spread and instantaneously available. The ability to be where help is needed fast, and the ability to spread a "Call For Help", enables the WeFind community to provide immediate aid, prevent harm, providing support effectively and instantaneously.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('3_DivContent'); document.getElementById('3_DivContent').setAttribute('class', ToggleExpandContruct('3_DivContent'));">
Created by a cheap, wearable location sensitive device.
<img id="3_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="3_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
The WeFind community safety net is created by a cheap, wearable location sensitive device and a mobile phone application. That device is attached to a kid, an elderly person, a challenged child or just anyone you. The device is sending location and status information to the WeFind community datacenter. Based on that location the community is able to receive alerts, when the one wearing the device needs assistance or is lost, and display messages which enable the community to monitor the whereabouts of that someone.
</div>
<div class="WeFind_Div_PunchLine" onclick="ResetAllElement('4_DivContent'); document.getElementById('4_DivContent').setAttribute('class', ToggleExpandContruct('4_DivContent'));">
There is no safety witout privacy !
<img id="4_DivContentLineExpander" class="WeFind_Img_LineExpander" src="./Images/ArrowDown.png" />
</div>
<div id="4_DivContent" class="WeFind_Text_Body WeFind_Div_Contructed" height="0px">
Data regarding each device is distributed based on the relations between the one wearing the device and the one receiving the information. Close relatives (Father, Mother, etc.' ...) receive detailed information while other people are filtered out. <span class="WeFind_Text_Body WeFind_Text_BodyUnderlined">Privacy is a key element in the WeFind community</span>; it is one of <span class="WeFind_Text_Body WeFind_Text_BodyUnderlined">the main building blocks of maintaining a safe environment</span>.
</div>
<p class="WeFind_Text_Body">
<center><img src="./Images/WeFind_CommunityHelp.png" width="600px"/><center>
</p>
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
标签： google-chrome css animation