Question

我有一个链接和一个空的div元素：

private void modifySQLFile()
{
    CopyFile();
   string destFileName = @"backup\DEPOT-Pub_Sub_Combined (wo CardHolder).sql" ;
   string[] fileTexts = File.ReadAllLines(@"backup\DEPOT-Pub_Sub_Combined (wo CardHolder).sql");
   int counter = 0;

    //File processing 
    foreach (string line in fileTexts)
    {
        //only process non-comments line
        if (line.StartsWith("--") == false)
        {
            //replace instances of server name
            if (line.Contains(SERVERNAME) == true)
            {
                fileTexts[counter] = fileTexts[counter].Replace(SERVERNAME, textBox1.Text);            
            }

            if (line.Contains(ACCESSID) == true)
            {
                fileTexts[counter] = fileTexts[counter].Replace(ACCESSID, textBox2.Text);
            }

            if(line.Contains(NETWORKID) == true)
            {
                fileTexts[counter] = fileTexts[counter].Replace(NETWORKID, textBox2.Text);
            }


        }
        counter++;
    }
    //update file
    File.WriteAllLines(destFileName, fileTexts);
File.Move(destFileName, "DEPOT-Pub_Sub_Combined (wo CardHolder)" + textBox1.Text + ".sql");
    MessageBox.Show("Completed!");
}

private void CopyFile()
{

    string targetPath = @"backup";
    string destFile = Path.Combine(targetPath, fileName);

    if(!Directory.Exists(targetPath))
    {
        Directory.CreateDirectory(targetPath);
    }

   File.Copy(fileName, destFile, true);
}

当用户点击“关于”链接时，javascript函数会触发并加载<div class='content'> <a href='#' onclick="loadData('about')">About</a> <div id='data'> </div> </div>的innerHTML的xml数据，结果：

<div id='data'>

你可以告诉我怎样才能为div大小设置动画？我的CSS看起来像这样：

    <div class='content'>
       <a href='#' onclick="loadData('about')">About</a>
       <div id='data'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
       </div>
    </div>

这里没有使用JQuery库。

Answer 1

如果您正在使用现代浏览器，那么您可以使用transition css属性：

transition: all 0.25s linear 0s;

以下是一个片段，展示了它在实践中的运作方式。

var strings = {
  'about' : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
};
var data = document.getElementById("data");
var open = false;
function test(area) {
  open = !open;
  if(open) {
    data.innerHTML = '<p>' + strings[area] + '</p>';
    data.style.height = '12em';
  } else {
    data.innerHTML = '<p></p>';
    data.style.height = '1em';
  }
}
document.getElementById("loadAbout").onclick = function(){
  test('about');
}

.content {
    color: white;
    border: 6px double white;
    min-width: 400px;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 99;
    text-align: center;
    font-family: Georgia, sans-serif;
    font-weight: 300;
    background-color: #2f5afc;
    box-shadow: 0 1em 4em -1em black;
    text-shadow: black 0 0 4px;
    transition: all 0.25s linear 0s;
}
#data {
    height: 1em;
    overflow-y: scroll;
    color: white;
    transition: all 0.25s linear 0s;
    line-height:20px;
}

<div class='content'>
  <a href='#' id="loadAbout">About</a>
  <div id='data'>
  </div>
</div>

加载内容后动画div元素大小

1 个答案: