Added smooth fade-in animation.

This commit is contained in:
Sean Li 2015-02-24 10:02:10 -08:00
Родитель 3b13a068ad
Коммит 1efad51881
8 изменённых файлов: 24 добавлений и 3 удалений

Просмотреть файл

@ -31,7 +31,7 @@ var ContainerListItem = React.createClass({
});
ContainerStore.remove(this.props.container.Name, () => {
var containers = ContainerStore.sorted();
if (containers.length === 0) {
if (containers.length === 1) {
$(document.body).find('.new-container-item').parent().fadeIn();
}
});

Просмотреть файл

@ -52,7 +52,7 @@ var Setup = React.createClass({
<div className="contents">
<RetinaImage src={img} checkIfRetinaImgExists={false}/>
<div className="detail">
<Radial progress={SetupStore.percent()} thick={true} gray={true}/>
<Radial progress={this.state.progress} thick={true} gray={true}/>
</div>
</div>
);
@ -87,7 +87,7 @@ var Setup = React.createClass({
<h1>Couldn&#39;t Install</h1>
<p>Kitematic didn&#39;t receive the administrative privileges required to install or upgrade VirtualBox &amp; Docker.</p>
<p>Please retry or download &amp; install VirutalBox manually from the <a onClick={this.handleOpenWebsite}>official Oracle website</a>.</p>
<button className="btn btn-action" onClick={this.handleRetry}>Retry</button>
<p><button className="btn btn-action" onClick={this.handleRetry}>Retry</button></p>
</div>
</div>
</div>

Просмотреть файл

@ -34,3 +34,12 @@
-webkit-transform: translateY(20px);
}
}
@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}

Просмотреть файл

@ -19,6 +19,7 @@
position: relative;
top: 10px;
left: 15px;
z-index: 1000;
&:hover {
.button-minimize.enabled {
.at2x('minimize.png', 10px, 10px);

Просмотреть файл

@ -1,6 +1,7 @@
/* Sidebar */
.sidebar {
.fade-in();
padding-top: 28px;
background-color: white;
margin: 0;

Просмотреть файл

@ -28,3 +28,10 @@
position: relative;
overflow: hidden;
}
.fade-in() {
opacity: 0;
-webkit-animation: fadein ease-in 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 0.3s;
}

Просмотреть файл

@ -1,4 +1,6 @@
.details {
.fade-in();
-webkit-animation-delay: 0.3s;
background-color: @color-background;
margin: 0;
padding: 0;

Просмотреть файл

@ -1,4 +1,5 @@
.setup {
.fade-in();
display: flex;
height: 100%;
width: 100%;