Fade in fade out


#1

I have prefsWindow = new BrowserWindow() in my app.js which renders prefs.html and uses prefs.js

How can I cause prefsWindow to fade in and fade out on key press

(I am using globalShortcut ‘Esc’ for this and doing prefsWindow.show() and prefsWindow.hide(), but want to see fade in / fade out instead of abrupt disappear and show)


#2

I don’t know if or to what extent various operating systems support windows fading in and out, and it would probably be cumbersome to support every possibility, so you might just want to use a frameless window. Then you can control its appearance via CSS and the transparent window setting.


#3

Thanks for the reply, Found this .css online but not sure how I can it use it, to what element should I assign the .app class to get fade in affect.

And can you elaborate on using transparent window setting ?, my BrowserWindow is already a frameless window, how can I change the transparency from 1 to 0 or o to 1 upon a key press

@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.app {
/* Disable text selection, or your app will feel like a web page */
-webkit-user-select: none;
-webkit-app-region: drag;

/* Cover the whole window */
height: 100%;

/* Make sure this matches the native window background color that you pass to

  • electron.BrowserWindow({…}), otherwise your app startup will look janky. */
    /background: rgb(40, 40, 40);/

/* Smoother startup */
animation: fadein 0.5s;
}


#4

Probably body.

And can you elaborate on using transparent window setting ?, my BrowserWindow is already a frameless window, how can I change the transparency from 1 to 0 or o to 1 upon a key press

There’s nothing in the documentation that suggests that this might be possible. I can’t give you anything that isn’t there. If you try it and it works, let me know. You can make CSS that changes between a solid background color and a transparent one, and I feel like that would be easiest.


#5

For now, I am using the animate option that comes with setBounds() method of the BrowserWindow class and it looks ok, I think we can write our own animations using setBounds() , getBounds() , setSize(), getSize() apis

if (prefsWindow.isVisible()) {
prefsWindow.setSize(0,0,true);
prefsWindow.hide();
} else {
if (prefBounds) {
console.log(“Pref win bounds”,prefBounds);
prefsWindow.setSize(prefBounds.width,prefBounds.height,true)
prefsWindow.show();
} else {
prefsWindow.show();
prefBounds = prefsWindow.getBounds();
console.log(“Registered Pref bounds”,prefBounds);
}


#6

Finally figured out the problem, steps to get animation to work

  1. create a BrowserWindow with {transparent: true, frame: false}
  2. Dont specify backgroundcolor during BrowserWindow creation in js, give color in html file as in step3
  3. In html use css styling to give background color to html body tag using rgba
    Ex: in css file use backgroundcolor=rgba(171,171,171,1)
  4. In css add animation that transisitons opacity from 1 to 0
  5. capture the animationend event in renderer js file and do remote.getCurrentWindow().hide();