transition.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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,
  13. .v-enter,
  14. .v-leave-active,
  15. .test-appear,
  16. .test-enter,
  17. .test-leave-active,
  18. .hello,
  19. .bye.active,
  20. .changed-enter {
  21. opacity: 0;
  22. }
  23. .test-anim-enter-active {
  24. animation: test-enter 50ms;
  25. -webkit-animation: test-enter 50ms;
  26. }
  27. .test-anim-leave-active {
  28. animation: test-leave 50ms;
  29. -webkit-animation: test-leave 50ms;
  30. }
  31. .test-anim-long-enter-active {
  32. animation: test-enter 100ms;
  33. -webkit-animation: test-enter 100ms;
  34. }
  35. .test-anim-long-leave-active {
  36. animation: test-leave 100ms;
  37. -webkit-animation: test-leave 100ms;
  38. }
  39. @keyframes test-enter {
  40. from {
  41. opacity: 0;
  42. }
  43. to {
  44. opacity: 1;
  45. }
  46. }
  47. @-webkit-keyframes test-enter {
  48. from {
  49. opacity: 0;
  50. }
  51. to {
  52. opacity: 1;
  53. }
  54. }
  55. @keyframes test-leave {
  56. from {
  57. opacity: 1;
  58. }
  59. to {
  60. opacity: 0;
  61. }
  62. }
  63. @-webkit-keyframes test-leave {
  64. from {
  65. opacity: 1;
  66. }
  67. to {
  68. opacity: 0;
  69. }
  70. }
  71. </style>