Html 创建一个mixin，通知页面顶部的横幅

我有一个页面，每当从另一个用户广播消息时，它都会创建一个弹出式通知。弹出窗口基本上是一个div，它保存来自发送消息的内容，并带有一个按钮，允许您关闭它

现在我已经研究了一百万种使用伪类来创建扩展属性的转换的方法，但我的问题是：是否可以在页面顶部创建一个横幅，当消息由另一个使用纯CSS3/transition Mixin发送时，横幅会随着消息一起滑下

我的想法是转换“最大高度”属性，但显然它不起作用。我这样假设是因为一开始就没有高度

CSS:

HTML:

{{title}
{{message}}

---

尝试添加一个带有

css

绑定的类，该绑定应用

transform:translateY

：

var Viewmodel=函数Viewmodel（）{
var=这个；
this.messages=ko.observearray（[]）；
this.removeMessages=函数removeMessages（）{
that.messages.removeAll（）；
};
this.addMessage=函数addMessage（）{
that.messages.push（“新消息传入”）；
};
};
应用绑定（新的Viewmodel（））
标题{
转换：转换0.3s；
转化：translateY（-110%）；
背景颜色：浅蓝色；
填充：2rem；
字体系列：无衬线；
}
header.active{
变换：translateY（0）；
}




将所有标记为已读
添加消息
transform与translateY完美配合！我以后一定会尝试这种方法。然而，这会上下切换消息，而在现实生活中，消息将由发送者动态发送，然后在发送者不想再看到它时由发送者关闭。我没有使用jQuery，而且可能不会在这个项目中使用它，但在转换中仍然使用+1。谢谢。@user3802738我无法从您的问题中完全了解您在哪个方面遇到了问题。我专注于CSS，仅将jQ用于演示目的；给我一分钟，我会把它改写成一个基于淘汰的解决方案。编辑：完成！快，快。谢谢你关上这个门，并提供了一个例子！
.banner-messages {
 > div {
  background-color: #74bce7;
  color: #fff;
  top: 0; 
  left: 0;
  padding: 20px 30px;
  position: relative; 
  line-height: 100%;    
  width: 100%;
  max-height: 0;
  z-index: 1000; 
  overflow-y: hidden;

  @include drop-down;
  }
}

@mixin drop-down {
  max-height: 200px;
  -webkit-transition: all 1.5s linear;
  -moz-transition: all 1.5s linear;
  -o-transition: all 1.5s linear;
  transition: all 1.5s linear;
}

<div id="test" class="banner-messages" data-bind="foreach: messages">
<div class="banner-message">
    <img data-bind="imgSrc: 'radio.svg'">

    <div class="banner-body">
        <p class="banner-title">{{title}}</p>
        <pre>{{message}}</pre>
    </div>

    <span class="exit-dialout-panel icon icon-closes" data-bind="visible: dismissable, click: $parent.dismissMessage.bind($parent, $data)"></span>
</div>