I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button.
After exploring various methods to create transitions using pseudo classes, I am wondering if it's possible to implement a sliding banner at the top of the page that shows the incoming messages purely using CSS3 and transition mixins?
My initial approach was to use the max-height property for the transition, but it seems like this method is not effective as there is no predefined height to start with.
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>