CSS を使用して、サイトの「div の高さ」をアニメーション化しようとしています。
FF と Safari では完全に動作しますが、Chrome では奇妙な動作をします。
4 つの 'div' があり、クリックすると伸びて含まれるテキスト全体が表示され、もう一度クリックすると収縮して非表示になります。Chrome では、そのうちの 1 つをクリックすると、すべてが最大の高さまで拡大され、アニメーションが終了すると、最初の高さに戻ります。
あなたはそれを見ることができます: 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>