Tree view · Animation

    <.tree_view
  class="tree-view"
  animation="instant"
  expanded_value={["repo-corex", "repo-lib"]}
  items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}
/>

  

    <.tree_view
  class="tree-view"
  animation="custom"
  expanded_value={["repo-corex", "repo-lib"]}
  on_expanded_change_client="my-tree-view-changed"
  items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}
/>

  

    import { animate } from "motion"
import {
  findTreeBranch,
  animateHeightOpen,
  animateHeightClose,
} from "corex"

const reducedMotion = () =>
  window.matchMedia("(prefers-reduced-motion: reduce)").matches

document.addEventListener("my-tree-view-changed", (e) => {
  const root = document.getElementById(e.detail.id)
  if (!root) return
  e.detail.added.forEach((v) => {
    const el = findTreeBranch(root, v)
    if (!el) return
    animateHeightOpen(el, { animator: animate, duration: 0.5, easing: [0.16, 1, 0.3, 1] })
    if (!reducedMotion()) {
      animate(
        el,
        { filter: ["blur(8px)", "blur(0px)"], y: [-10, 0] },
        { duration: 0.55, easing: [0.16, 1, 0.3, 1] },
      )
    }
  })
  e.detail.removed.forEach((v) => {
    const el = findTreeBranch(root, v)
    if (!el) return
    animateHeightClose(el, { animator: animate, duration: 0.28, easing: "ease-in" })
    if (!reducedMotion()) {
      animate(
        el,
        { filter: ["blur(0px)", "blur(8px)"], y: [0, -8] },
        { duration: 0.26, easing: "ease-in" },
      )
    }
  })
})