How to create a separate transparent window on click?

[HuakunShen]

I want to create a transparent window with no title bar and no background in order to show an animation.

I could set the main window to transparent and no decoration, but when a new window is created, it always has a background and title bar.

The code is like this

import { WebviewWindow } from "@tauri-apps/api/window";
...
const win = new WebviewWindow("win-animate", {
      url: "/animation",
    });
await win.setDecorations(false);

Screenshot

Here is a screenshot of the result. On the left, it's the transparent main window; on the right, it's the newly created window which always has background and title bar.

The green rectangle is where the main window is, the red rectangle indicate the button to click to create the new window.

Thank you.

[FabianLars]

I feel like this is a timin issue. new WebviewWindow is techincally async so it may not be done when you call win.setDecorations(false) 🤔
Does setting it in the constructor via decorations: false not work for you?

[HuakunShen]

Actually, win.setDecorations(false) worked for me. But there is not a setTransparent API.

[HuakunShen]

Oh, it works if I use the constructor way.

const window = new WebviewWindow("win-animate", {
      url: "/animation",
      transparent: true,
      decorations: false
    });

Thank you! @FabianLars