transition.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <script src="../../dist/vue.global.js"></script>
  2. <div id="app"></div>
  3. <style>
  4. .test {
  5. -webkit-transition: opacity 50ms ease;
  6. transition: opacity 50ms ease;
  7. }
  8. .group-move {
  9. -webkit-transition: -webkit-transform 50ms ease;
  10. transition: transform 50ms ease;
  11. }
  12. .v-appear, .v-enter, .v-leave-active,
  13. .test-appear, .test-enter, .test-leave-active,
  14. .hello, .bye.active,
  15. .changed-enter {
  16. opacity: 0;
  17. }
  18. .test-anim-enter-active {
  19. animation: test-enter 50ms;
  20. -webkit-animation: test-enter 50ms;
  21. }
  22. .test-anim-leave-active {
  23. animation: test-leave 50ms;
  24. -webkit-animation: test-leave 50ms;
  25. }
  26. .test-anim-long-enter-active {
  27. animation: test-enter 100ms;
  28. -webkit-animation: test-enter 100ms;
  29. }
  30. .test-anim-long-leave-active {
  31. animation: test-leave 100ms;
  32. -webkit-animation: test-leave 100ms;
  33. }
  34. @keyframes test-enter {
  35. from { opacity: 0 }
  36. to { opacity: 1 }
  37. }
  38. @-webkit-keyframes test-enter {
  39. from { opacity: 0 }
  40. to { opacity: 1 }
  41. }
  42. @keyframes test-leave {
  43. from { opacity: 1 }
  44. to { opacity: 0 }
  45. }
  46. @-webkit-keyframes test-leave {
  47. from { opacity: 1 }
  48. to { opacity: 0 }
  49. }
  50. </style>