Open Y80 opened 1 year ago
appWindow.onMoved(() => {
document.body.style.opacity = '0'
requestAnimationFrame(() => {
document.body.style.opacity = '1'
})
})
This solution has only a small effect, I guess because emit 'onmoved' event are so slow.
import { useEffect, useRef } from 'react'
export default function Header() {
const headerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const ele = headerRef.current!
let isClicked = false
function handleMouseDown() {
isClicked = true
}
function handleMouseUp() {
isClicked = false
}
function handleMouseMove() {
if (!isClicked) return
document.body.style.opacity = '0'
requestAnimationFrame(() => {
document.body.style.opacity = '1'
})
}
ele.addEventListener('mousedown', handleMouseDown)
ele.addEventListener('mouseup', handleMouseUp)
ele.addEventListener('mousemove', handleMouseMove)
return () => {
ele.removeEventListener('mousedown', handleMouseDown)
ele.removeEventListener('mouseup', handleMouseUp)
ele.removeEventListener('mousemove', handleMouseMove)
}
}, [])
return <div data-tauri-drag-region ref={headerRef}></div>
}
This is my final solution. It's very effective.
Hi, I am not sure if it matches your use case, but I was looking into the same problem and found this:
https://github.com/tauri-apps/window-vibrancy
It works great and solves the issue at the Tauri window level. It does of course require the private api use and setting transparency to on, but I believe the above solution needs this as well.
Describe the bug
The transparent effect cannot be effective in real time(when move window).
discord: demo video
Reproduction
No response
Expected behavior
No response
Platform and versions
Stack trace
No response
Additional context
No response