injectStyles() — vue Function Reference

Architecture documentation for the injectStyles() function in helpers.ts from the vue codebase.

Function typescript VueCore Instance calls 1

Entity Profile

VueCore→ Instance→ injectStyles() — vue Function Reference

Dependency Diagram

graph TD
  79b3dbe8_b79b_b5de_51cf_dd6781dae129["injectStyles()"]
  17e86ae4_9dda_9399_9625_68fceea277c4["helpers.ts"]
  79b3dbe8_b79b_b5de_51cf_dd6781dae129 -->|defined in| 17e86ae4_9dda_9399_9625_68fceea277c4
  50b5add1_77d3_87b0_334d_2a80a1f3a03d["insertCSS()"]
  79b3dbe8_b79b_b5de_51cf_dd6781dae129 -->|calls| 50b5add1_77d3_87b0_334d_2a80a1f3a03d
  style 79b3dbe8_b79b_b5de_51cf_dd6781dae129 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

test/transition/helpers.ts lines 92–144

export function injectStyles() {
  if (injected) return { duration, buffer }
  injected = true
  insertCSS(`
    .test {
      -webkit-transition: opacity ${duration}ms ease;
      transition: opacity ${duration}ms ease;
    }
    .group-move {
      -webkit-transition: -webkit-transform ${duration}ms ease;
      transition: transform ${duration}ms ease;
    }
    .v-appear, .v-enter, .v-leave-active,
    .test-appear, .test-enter, .test-leave-active,
    .hello, .bye.active,
    .changed-enter {
      opacity: 0;
    }
    .test-anim-enter-active {
      animation: test-enter ${duration}ms;
      -webkit-animation: test-enter ${duration}ms;
    }
    .test-anim-leave-active {
      animation: test-leave ${duration}ms;
      -webkit-animation: test-leave ${duration}ms;
    }
    .test-anim-long-enter-active {
      animation: test-enter ${duration * 2}ms;
      -webkit-animation: test-enter ${duration * 2}ms;
    }
    .test-anim-long-leave-active {
      animation: test-leave ${duration * 2}ms;
      -webkit-animation: test-leave ${duration * 2}ms;
    }
    @keyframes test-enter {
      from { opacity: 0 }
      to { opacity: 1 }
    }
    @-webkit-keyframes test-enter {
      from { opacity: 0 }
      to { opacity: 1 }
    }
    @keyframes test-leave {
      from { opacity: 1 }
      to { opacity: 0 }
    }
    @-webkit-keyframes test-leave {
      from { opacity: 1 }
      to { opacity: 0 }
    }
  `)
  return { duration, buffer }
}