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

Question

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

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

我的想法是转换 max-height 属性，但显然它不起作用。我假设是因为一开始就没有高度。

CSS：

.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;
}

HTML：

<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>

Answer 1

尝试添加一个具有css 绑定的类，该绑定适用transform: translateY：

var Viewmodel = function Viewmodel() {
  var that = this;
  
  this.messages = ko.observableArray([]);
  
  this.removeMessages = function removeMessages() {
    that.messages.removeAll();
  };
  
  this.addMessage = function addMessage() {
    that.messages.push("A new message came in");
  };
};

ko.applyBindings( new Viewmodel() );

header {
  transition: transform 0.3s;
  transform: translateY(-110%);
  background-color: lightblue;
  padding: 2rem;
  font-family: sans-serif;
}

header.active {
  transform: translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
  <header data-bind="css: { active: messages().length > 0 }">
    <ul data-bind="foreach: messages">
      <li data-bind="text: $data"></li>
    </ul>
    <button data-bind="click: removeMessages">mark all as read</button>
  </header>
</main>

<button data-bind="click: addMessage">Add message</button>