Merge pull request #256 from geeeeeeeeek/issue/delay-webview-show-up

Delay webview fade-in.
This commit is contained in:
Akash Nimare
2017-08-02 19:08:01 +00:00
committed by GitHub
2 changed files with 13 additions and 3 deletions

View File

@@ -208,16 +208,20 @@ body {
webview { webview {
opacity: 1; opacity: 1;
transition: opacity 0.3s; transition: opacity 0.3s ease-in;
flex-grow: 1; flex-grow: 1;
} }
webview.onload {
transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
webview.disabled { webview.disabled {
flex: 0 1; flex: 0 1;
height: 0; height: 0;
width: 0; width: 0;
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s ease-out;
} }
webview:focus { webview:focus {

View File

@@ -59,7 +59,10 @@ class WebView extends BaseComponent {
this.props.onTitleChange(); this.props.onTitleChange();
}); });
this.$el.addEventListener('dom-ready', this.show.bind(this)); this.$el.addEventListener('dom-ready', () => {
this.$el.classList.add('onload');
this.show();
});
this.$el.addEventListener('did-fail-load', event => { this.$el.addEventListener('did-fail-load', event => {
const {errorDescription} = event; const {errorDescription} = event;
@@ -92,6 +95,9 @@ class WebView extends BaseComponent {
} }
this.$el.classList.remove('disabled'); this.$el.classList.remove('disabled');
setTimeout(() => {
this.$el.classList.remove('onload');
}, 1000);
this.focus(); this.focus();
this.loading = false; this.loading = false;
this.props.onTitleChange(this.$el.getTitle()); this.props.onTitleChange(this.$el.getTitle());