transition.nvue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="u-page">
  3. <u-gap height="20" bgColor="#fff"></u-gap>
  4. <u-cell-group border>
  5. <u-cell
  6. :titleStyle="{ fontWeight: 500 }"
  7. @click="openTransition(item.mode)"
  8. :title="item.title"
  9. v-for="(item, index) in list"
  10. :key="index"
  11. clickable
  12. >
  13. <image
  14. slot="icon"
  15. class="u-cell-icon"
  16. :src="item.iconUrl"
  17. mode="widthFix"
  18. ></image>
  19. </u-cell>
  20. <u-transition
  21. :mode="mode"
  22. :show="show"
  23. :custom-style="style"
  24. @click="click"
  25. @beforeEnter="beforeEnter"
  26. @enter="enter"
  27. @afterEnter="afterEnter"
  28. @beforeLeave="beforeLeave"
  29. @leave="leave"
  30. @afterLeave="afterLeave"
  31. >
  32. <view class="transition"></view>
  33. </u-transition>
  34. </u-cell-group>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. mode: "",
  42. show: false,
  43. style: {
  44. position: "fixed",
  45. top: `${uni.$u.sys().windowHeight / 2 - 50}px`,
  46. left: `${uni.$u.sys().windowWidth / 2 - 50}px`,
  47. width: "120px",
  48. height: "120px",
  49. backgroundColor: "#1989fa",
  50. },
  51. list: [
  52. {
  53. mode: "fade",
  54. title: "淡入",
  55. iconUrl:
  56. "https://cdn.uviewui.com/uview/demo/transition/fade.png",
  57. },
  58. {
  59. mode: "fade-up",
  60. title: "上滑淡入",
  61. iconUrl:
  62. "https://cdn.uviewui.com/uview/demo/transition/fadeUp.png",
  63. },
  64. {
  65. mode: "zoom",
  66. title: "缩放",
  67. iconUrl:
  68. "https://cdn.uviewui.com/uview/demo/transition/zoom.png",
  69. },
  70. {
  71. mode: "fade-zoom",
  72. title: "缩放淡入",
  73. iconUrl:
  74. "https://cdn.uviewui.com/uview/demo/transition/fadeZoom.png",
  75. },
  76. {
  77. mode: "fade-down",
  78. title: "下滑淡入",
  79. iconUrl:
  80. "https://cdn.uviewui.com/uview/demo/transition/fadeDown.png",
  81. },
  82. {
  83. mode: "fade-left",
  84. title: "左滑淡入",
  85. iconUrl:
  86. "https://cdn.uviewui.com/uview/demo/transition/fadeLeft.png",
  87. },
  88. {
  89. mode: "fade-right",
  90. title: "右滑淡入",
  91. iconUrl:
  92. "https://cdn.uviewui.com/uview/demo/transition/fadeRight.png",
  93. },
  94. {
  95. mode: "slide-up",
  96. title: "上滑进入",
  97. iconUrl:
  98. "https://cdn.uviewui.com/uview/demo/transition/slideUp.png",
  99. },
  100. {
  101. mode: "slide-down",
  102. title: "下滑进入",
  103. iconUrl:
  104. "https://cdn.uviewui.com/uview/demo/transition/slideDown.png",
  105. },
  106. {
  107. mode: "slide-left",
  108. title: "左滑进入",
  109. iconUrl:
  110. "https://cdn.uviewui.com/uview/demo/transition/slideLeft.png",
  111. },
  112. {
  113. mode: "slide-right",
  114. title: "右滑进入",
  115. iconUrl:
  116. "https://cdn.uviewui.com/uview/demo/transition/slideRight.png",
  117. },
  118. ],
  119. };
  120. },
  121. mixins: [uni.$u.mixin],
  122. methods: {
  123. openTransition(mode) {
  124. this.mode = mode;
  125. this.show = true;
  126. setTimeout(() => {
  127. this.show = false;
  128. }, 1500);
  129. },
  130. click() {
  131. // console.log("click");
  132. },
  133. beforeEnter() {
  134. // console.log("beforeEnter");
  135. },
  136. enter() {
  137. // console.log("enter");
  138. },
  139. afterEnter() {
  140. // console.log("afterEnter");
  141. },
  142. beforeLeave() {
  143. // console.log("beforeLeave");
  144. },
  145. leave() {
  146. // console.log("leave");
  147. },
  148. afterLeave() {
  149. // console.log("afterLeave");
  150. },
  151. },
  152. };
  153. </script>
  154. <style lang="scss">
  155. .u-page {
  156. padding: 0;
  157. }
  158. .transition {
  159. background-color: $u-primary;
  160. }
  161. </style>