animate tree indent guides via opacity

Author: jrieken

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -2830,8 +2830,8 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 		const content: string[] = [];
 
 		if (styles.treeIndentGuidesStroke) {
-			content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide  { border-color: ${styles.treeInactiveIndentGuidesStroke}; }`);
-			content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { border-color: ${styles.treeIndentGuidesStroke}; }`);
+			content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide  { opacity: 1; border-color: ${styles.treeInactiveIndentGuidesStroke}; }`);
+			content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { opacity: 1; border-color: ${styles.treeIndentGuidesStroke}; }`);
 		}
 
 		// Sticky Scroll Background

src/vs/base/browser/ui/tree/media/tree.css

@@ -30,10 +30,11 @@
 	box-sizing: border-box;
 	height: 100%;
 	border-left: 1px solid transparent;
+	opacity: 0;
 }
 
 .monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {
-	transition: border-color 0.1s linear;
+	transition: opacity 0.1s linear;
 }
 
 .monaco-tl-twistie,