Google chrome 谷歌Chrome高度动画的奇怪行为
我正在尝试使用CSS在我的网站上设置一个“div”的高度动画 它在FF和Safari上工作得非常完美，但在Chrome上却有一种奇怪的行为 我有4个'div's，当单击时，它们会拉伸以显示整个包含文本，然后再次单击时，它们会收缩并隐藏。在Chrome上，一旦我单击其中一个，它们都会扩展到全高，然后在动画结束时，返回到它们应该在第一位的高度 您可以在以下网站上看到： 有解决办法吗 谢谢 埃雷斯 CSS是：Google chrome 谷歌Chrome高度动画的奇怪行为,google-chrome,css,animation,Google Chrome,Css,Animation,我正在尝试使用CSS在我的网站上设置一个“div”的高度动画 它在FF和Safari上工作得非常完美，但在Chrome上却有一种奇怪的行为 我有4个'div's，当单击时，它们会拉伸以显示整个包含文本，然后再次单击时，它们会收缩并隐藏。在Chrome上，一旦我单击其中一个，它们都会扩展到全高，然后在动画结束时，返回到它们应该在第一位的高度 您可以在以下网站上看到： 有解决办法吗 谢谢 埃雷斯 CSS是： .WeFind_Div_PunchLine::first-letter{ f
.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;
}
<!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>
WeFind网站，WeFind是什么
if（navigator.appName==“Microsoft Internet Explorer”）window.location=“./whatisitit\u IEVer.html”；
功能重置（ElementName）{
var CurentElement=ElementName.substring（0,1）；
对于（var指数=1；指数<5；指数++）{
if（Index！=CurentElement&&document.getElementById（Index+''u DivContent'）.getAttribute（'class'）.indexOf（'WeFind\u Div\u Expand'）>0）{
document.getElementById（Index+''u DivContent'）.setAttribute（'class'，'WeFind_Text''u Body WeFind_Div_construct'）；
document.getElementById（Index+'_DivContentLineExpander'）.src=“./Images/ArrowDown.png”；
}
}
}
功能切换ExpandContract（ElementName）{
if（document.getElementById（ElementName）.getAttribute（'class'）.indexOf（'WeFind\u Div\u Expand'）>0）{
document.getElementById（ElementName+'LineExpander'）.src=“./Images/ArrowDown.png”；
返回（'WeFind_Text_Body WeFind_Div_construct'）；
}
否则{
document.getElementById（ElementName+'LineExpander'）.src=“./Images/ArrowUp.png”；
返回（'WeFind_Text_Body WeFind_Div_Expand'）；
}
}
WeFind，一个有义务为所有人创造安全生活环境的社区。
“社区纽带”和“社区承诺”的力量
WeFind社区利用“社区纽带”和“社区承诺”的力量为所爱的人、老年人和受挑战的人创造一个安全的生活环境，为每个人创造一个安全的环境。
群众的力量
WeFind利用群众的力量建立了一个安全网，时刻保持警惕，随时准备向任何需要帮助的人提供被动和主动援助。这张网被广泛传播，并且可以即时使用。快速到达需要帮助的地方的能力，以及传播“求助呼吁”的能力，使WeFind社区能够立即提供援助，防止伤害，有效和即时地提供支持。
由廉价、可穿戴的位置敏感设备创建。
WeFind社区安全网是由一个廉价的、可穿戴的位置敏感设备和一个移动电话应用程序创建的。该设备连接到一个孩子、一个老人、一个有挑战的孩子或任何你喜欢的人。该设备正在向WeFind社区数据中心发送位置和状态信息。基于该位置，社区能够在佩戴设备的人需要帮助或丢失时接收警报，并显示消息，使社区能够监控该人的下落。
没有隐私就没有安全！
关于每个设备的数据基于佩戴设备的设备和接收信息的设备之间的关系来分布。近亲（父亲、母亲等……）接收详细信息，而其他人则被过滤掉。隐私是WeFind社区的关键要素；它是维持安全环境的主要组成部分之一。
$('h3').click(function(){
$('p').slideToggle();
});
下面是一个使用jQuery和slideToggle的简单提琴 我设法解决了这个问题 问题的原因是包含“div”的“table”的CSS部分 该表有一个类：
.WeFind_Table_Stretched{
height: 100%;
width: 100%;
}
Erez我尝试了两种选择。仍然FF显示平滑动画，但是Chrome扩展了所有div元素，而不是平滑过渡。您可以在以下位置看到页面修改版本的效果：所有代码都是内联的（CSS和JQ），因此您可以看到我做了什么。