Transition.vue 507 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <main class="app-main">
  3. <router-tab
  4. page-transition="page-fade"
  5. tab-transition="tab-scale"
  6. />
  7. </main>
  8. </template>
  9. <style lang="scss" scoped>
  10. /deep/ .page-fade {
  11. &-enter-active,
  12. &-leave-active {
  13. transition: opacity .5s;
  14. }
  15. &-enter,
  16. &-leave-to {
  17. opacity: 0;
  18. }
  19. }
  20. /deep/ .tab-scale {
  21. &-enter-active,
  22. &-leave-active {
  23. transition: opacity .5s, transform .5s;
  24. }
  25. &-enter,
  26. &-leave-to {
  27. opacity: 0;
  28. transform: scale(1.5);
  29. }
  30. }
  31. </style>