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的{{1}}绑定添加类：

＆＃13;

transform: translateY

＆＃13;

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() );

＆＃13;

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

＆＃13;

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

1 个答案: