background: add fade when switching

.config/quickshell/ii/modules/background/Background.qml

@@ -148,7 +148,11 @@ Variants {
         // Wallpaper
         Image {
             id: wallpaper
-            visible: !bgRoot.wallpaperIsVideo
+            visible: opacity > 0
+            opacity: (status === Image.Ready && !bgRoot.wallpaperIsVideo) ? 1 : 0
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+            }
             property real value // 0 to 1, for offset
             asynchronous: true
             value: {

.config/quickshell/ii/modules/sidebarLeft/anime/BooruImage.qml

@@ -63,13 +63,17 @@ Button {
             anchors.fill: parent
             width: root.rowHeight * modelData.aspect_ratio
             height: root.rowHeight
-            visible: opacity > 0
-            opacity: status === Image.Ready ? 1 : 0
             fillMode: Image.PreserveAspectFit
             source: modelData.preview_url
             sourceSize.width: root.rowHeight * modelData.aspect_ratio
             sourceSize.height: root.rowHeight
 
+            visible: opacity > 0
+            opacity: status === Image.Ready ? 1 : 0
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+            }
+
             layer.enabled: true
             layer.effect: OpacityMask {
                 maskSource: Rectangle {
@@ -78,10 +82,6 @@ Button {
                     radius: imageRadius
                 }
             }
-
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
-            }
         }
 
         RippleButton {