inject-styles.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. function insertCSS (text) {
  2. var cssEl = document.createElement('style')
  3. cssEl.textContent = text.trim()
  4. document.head.appendChild(cssEl)
  5. }
  6. const duration = process.env.TRANSITION_DURATION || 50
  7. let injected = false
  8. export default function injectStyles () {
  9. if (injected) return duration
  10. injected = true
  11. insertCSS(`
  12. .test {
  13. -webkit-transition: opacity ${duration}ms ease;
  14. transition: opacity ${duration}ms ease;
  15. }
  16. .v-appear, .v-enter, .v-leave-active,
  17. .test-appear, .test-enter, .test-leave-active,
  18. .hello, .bye.active,
  19. .changed-enter {
  20. opacity: 0;
  21. }
  22. .test-anim-enter-active {
  23. animation: test-enter ${duration}ms;
  24. -webkit-animation: test-enter ${duration}ms;
  25. }
  26. .test-anim-leave-active {
  27. animation: test-leave ${duration}ms;
  28. -webkit-animation: test-leave ${duration}ms;
  29. }
  30. @keyframes test-enter {
  31. from { opacity: 0 }
  32. to { opacity: 1 }
  33. }
  34. @-webkit-keyframes test-enter {
  35. from { opacity: 0 }
  36. to { opacity: 1 }
  37. }
  38. @keyframes test-leave {
  39. from { opacity: 1 }
  40. to { opacity: 0 }
  41. }
  42. @-webkit-keyframes test-leave {
  43. from { opacity: 1 }
  44. to { opacity: 0 }
  45. }
  46. `)
  47. return duration
  48. }