Google Chrome高度动画的奇怪行为

我正在尝试使用CSS为我的网站上的div高度设置动画效果。Google Chrome高度动画的奇怪行为

它在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">&nbsp;</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"> 
        &nbsp; 
       </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>

来源

2013-03-23 ehboym

那么我设法解决了这个问题。

问题的原因是包含'div'的'table'的CSS部分。

表有一类：

.WeFind_Table_Stretched{ 
    height: 100%; 
    width: 100%; 
}

高度：100％引发的问题在Chrome。恕我直言，Chrome中的一个错误，但我没有设法得到谷歌的回应。

我删除了高度100％的部分，整个事情就像一个魅力。

Erez

来源

2013-03-26 00:10:54 ehboym

好像你有很多的代码来实现最终的结果。你可能想看看jQuery的滑动切换功能。 http://api.jquery.com/slideToggle/这应该消除所有的CSS动画和JavaScript的需要。

在jQuery中，你可以这样做：

$('h3').click(function(){ 
    $('p').slideToggle(); 
});

在这里，你点击的标题和p显露。

如果您确实继续使用CSS，则不需要动画，只需进行简单的转换即可，并且您可以打开和关闭某个类来为高度设置动画。 W3学校有一个演示，我认为这将有助于此。 http://www.w3schools.com/css3/css3_transitions.asp

这是一个使用jQuery和slideToggle的简单小提琴。 http://jsfiddle.net/markgtoce/HTyXm/

来源

2013-03-23 23:24:01 mToce

我试了两种选择。尽管如此，FF仍然显示出流畅的动画效果，但Chrome正在扩展所有div元素，而不是平滑过渡。您可以在http：// http：//www.wefind-tech.com/WhatIsIt_ChromeV.html页面的修改版本上看到效果，所有代码都是内联的（CSS和JQ），因此您可以看到我所做的。 – ehboym 2013-03-25 00:18:57

Google Chrome高度动画的奇怪行为

回答

相关问题