Question

我遇到了一个困扰我的问题。

在ASP.NET MVC4项目中，我每次都在_Layout视图中检查ViewBag以获取结果消息，如果有的话，我会为消息文本呈现div。我想为这个div设置动画，使其显示并在大约3秒后消失。如果可能的话，我想用纯CSS进行这项工作。

以下是我的代码片段：

CSS：

#result-message-div {
margin: 50px 0px auto;
width: auto;
background-color: #ffa11f;
text-align: center;
font-size: small;
font-weight: bold;
-webkit-animation: resultMessageAnimation 3s;
}

@-webkit-keyframes resultMessageAnimation {
0% { height: 0%; }
15% { height: 100%; }
75% { height: 100%; }
100% { height: 0%; }
}

剃刀：

@if (ViewBag.ResultMessage != null)
{
    <div id="result-message-div">
        @ViewBag.ResultMessage
    </div>
}

使用此代码，div确实出现，但没有动画发生且仍然可见。毕竟，我是否正确地走上了这条道路？

Answer 1

你非常接近！问题是您使用100%作为高度。基本上，这意味着100％的父母，默认情况下只有其内容一样大（所以，鸡蛋和鸡蛋的问题）。

如果您可以为消息框设置静态高度，我怀疑您的代码应该可以正常工作。

#result-message-div {
    margin: 50px 0px auto;
    /* width: auto; // not necessary as 'auto' is the default value */
    background-color: #ffa11f;
    text-align: center;
    font-size: small;
    font-weight: bold;
    height: 0; /* this value will apply after animation is done  */
    overflow: hidden; /* important, or  text will always show */
    [-webkit-/-moz-]animation: resultMessageAnimation 3s;
}

@[-webkit-/-moz-]keyframes resultMessageAnimation {
    0% { height: 0; }
    15% { height: 20px; } /* note static px value instead of % */
    75% { height: 20px; }
    100% { height: 0; }
}

http://jsfiddle.net/NufRJ/1/

使用纯CSS3显示/隐藏出现的div

1 个答案: