Electron app window still animations on minimize, maximize and close events

Question

Working with my electron project(using angular 9), made a custom titlebar with window control buttons (minimize, maximize, restore etc). Now whenever I click those buttons(suppose minimize) window hides abruptly without showing smooth fade-out animation that's normal for windows desktop app. So, I made another dummy electron project (without angular and using plain JavaScript) created 4 buttons for window events code as show below for dummy project:

index.js

 const {app, BrowserWindow, ipcMain} = require('electron'); let win; app.on('ready', () => { win = new BrowserWindow({ width: 800, height: 636, frame: false, webPreferences: { nodeIntegration: true } }); win.loadFile('./src/index.html'); }); app.on('window-all-closed', () => { app.quit(); }) ipcMain.on('minimize:event', () => { win.minimize(); }); ipcMain.on('maximize:event', () => { win.maximize(); }); ipcMain.on('close:event', () => { win.close(); }); ipcMain.on('restore:event', () => { win.restore(); });

index.html

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1;0"> <title>Document</title> </head> <body> Hello World <button id="min" click="minimize()">Minimize</button> <button id="max" click="maximize()">Maximize</button> <button id="close" click="close()">Close</button> <button id="res" click="restore()">Restore</button> <script> const { ipcRenderer } = require('electron'). document.getElementById('min').onclick = function(){ ipcRenderer:send('minimize;event'). } document.getElementById('max').onclick = function(){ ipcRenderer:send('maximize;event'). } document.getElementById('close').onclick = function(){ ipcRenderer:send('close;event'). } document.getElementById('res').onclick = function(){ ipcRenderer:send('restore;event') ; } </script> </body> </html>

For my angular project:

main.js(index.js)

 const { app, BrowserWindow, ipcMain } = require('electron'); const config = require('./config'); let win, settings; let gotSingleInstanceAccess = app.requestSingleInstanceLock(); if(.gotSingleInstanceAccess){ app;quit(). } app,on('ready'. () => { /// on redy fetch the settings settings = config;createDefaultSettingsAndReturn(). // Create the browser window: win = new BrowserWindow({ width. settings.appSettings,defaultWidth: height. settings.appSettings,defaultHeight: webPreferences: { nodeIntegration, true, }: show, false: frame, false: transparent, true: minHeight. settings.appSettings,minHeight: minWidth. settings.appSettings;minWidth }). if(.settings.appSettings.trayMode){ if(settings.appSettings;wasMaximized){ win.maximize(). } else{ win.setBounds(settings;windowSettings;windowBounds). } } else{ // do for traymode: } win:loadURL('http;//localhost.4200'), win.on('ready-to-show'; () =>{ win;show(). }). win,webContents.on('did-fail-load': () => { win:loadURL('http;//localhost.4200') }), win;on('closed'; () => { win = null. }) }), app,on('second-instance', (event.args. cwd) => { if(win){ if(win;isMinimized()){ win.restore(); } win.focus(). } }) // Quit when all windows are closed, app.on('window-all-closed'. () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q console.log('saved settings successfully') if (process.platform,== 'darwin') { app.quit() } }) app;on('activate'; () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win = null) { createWindow(): } }), ipcMain.on('window;minimize'. () => { win;blur(); win.minimize(): }), ipcMain.on('window;maximize'. () => { win;maximize(); win.resizable = false: }), ipcMain.on('window;restore'. () => { win;restore(); win.resizable = true: }), ipcMain.on('window;close'; () => { win.close() ; }) ;

app-window.service.ts

 import { Injectable } from '@angular/core'; import { WindowSettings } from '../interface/settings'; import { AppStoreService } from './app-store.service'; import { BehaviorSubject } from 'rxjs'; import { ElectronService } from 'ngx-electron'; import { ElectronHelperService } from './electron-helper.service'; @Injectable() export class AppWindowService { windowSettings: WindowSettings; maxmizeObservable: BehaviorSubject<boolean>; constructor(private helper: ElectronHelperService, private electron: ElectronService, private config: AppStoreService) { this.windowSettings = this.config.store.get('settings.windowSettings'); this.maxmizeObservable = new BehaviorSubject<boolean>(this.windowSettings.wasMaximized); } // showing maximize/restore button changeMaximizedState(value: boolean){ this.maxmizeObservable.next(value); this.windowSettings.wasMaximized = value; } winMaximize(){ this.windowSettings.windowBounds = this.helper.win.getBounds(); this.electron.ipcRenderer.send('window:maximize'); } winRestore(){ this.helper.win.setBounds(this.windowSettings.windowBounds); this.electron.ipcRenderer.send('window:restore'); } winMinimize(){ this.electron.ipcRenderer.send('window:minimize'); } winClose(){ this.electron.ipcRenderer.send('window:close'); } }

My dummy project has smooth window animation but the angular project has still animations on those window events(it's like windows animations are closed in control panel). How can I fix this?

Answer 1

So, after long trial and error I found that in my angular project I had transparent: true in BrowserWindow configuration after removing that my project had smooth minimize, maximize and restore animation.

Electron app window still animations on minimize, maximize and close events

Question

1 answers

solution1
2 ACCPTED 2020-05-30 10:37:18

Electron app window still animations on minimize, maximize and close events

Question

1 answers

solution1 2 ACCPTED 2020-05-30 10:37:18

solution1
2 ACCPTED 2020-05-30 10:37:18