u-transition.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view
  3. v-if="inited"
  4. class="u-transition"
  5. ref="u-transition"
  6. @tap="clickHandler"
  7. :class="classes"
  8. :style="[mergeStyle]"
  9. @touchmove="noop"
  10. >
  11. <slot />
  12. </view>
  13. </template>
  14. <script>
  15. import props from './props.js';
  16. // 组件的methods方法,由于内容较长,写在外部文件中通过mixin引入
  17. import transition from "./transition.js";
  18. /**
  19. * transition 动画组件
  20. * @description
  21. * @tutorial
  22. * @property {String} show 是否展示组件 (默认 false )
  23. * @property {String} mode 使用的动画模式 (默认 'fade' )
  24. * @property {String | Number} duration 动画的执行时间,单位ms (默认 '300' )
  25. * @property {String} timingFunction 使用的动画过渡函数 (默认 'ease-out' )
  26. * @property {Object} customStyle 自定义样式
  27. * @event {Function} before-enter 进入前触发
  28. * @event {Function} enter 进入中触发
  29. * @event {Function} after-enter 进入后触发
  30. * @event {Function} before-leave 离开前触发
  31. * @event {Function} leave 离开中触发
  32. * @event {Function} after-leave 离开后触发
  33. * @example
  34. */
  35. export default {
  36. name: 'u-transition',
  37. data() {
  38. return {
  39. inited: false, // 是否显示/隐藏组件
  40. viewStyle: {}, // 组件内部的样式
  41. status: '', // 记录组件动画的状态
  42. transitionEnded: false, // 组件是否结束的标记
  43. display: false, // 组件是否展示
  44. classes: '', // 应用的类名
  45. }
  46. },
  47. computed: {
  48. mergeStyle() {
  49. const { viewStyle, customStyle } = this
  50. return {
  51. // #ifndef APP-NVUE
  52. transitionDuration: `${this.duration}ms`,
  53. // display: `${this.display ? '' : 'none'}`,
  54. transitionTimingFunction: this.timingFunction,
  55. // #endif
  56. // 避免自定义样式影响到动画属性,所以写在viewStyle前面
  57. ...uni.$u.addStyle(customStyle),
  58. ...viewStyle
  59. }
  60. }
  61. },
  62. // 将mixin挂在到组件中,uni.$u.mixin实际上为一个vue格式对象
  63. mixins: [uni.$u.mpMixin, uni.$u.mixin, transition, props],
  64. watch: {
  65. show: {
  66. handler(newVal) {
  67. // vue和nvue分别执行不同的方法
  68. // #ifdef APP-NVUE
  69. newVal ? this.nvueEnter() : this.nvueLeave()
  70. // #endif
  71. // #ifndef APP-NVUE
  72. newVal ? this.vueEnter() : this.vueLeave()
  73. // #endif
  74. },
  75. // 表示同时监听初始化时的props的show的意思
  76. immediate: true
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. @import '../../libs/css/components.scss';
  83. /* #ifndef APP-NVUE */
  84. // vue版本动画相关的样式抽离在外部文件
  85. @import './vue.ani-style.scss';
  86. /* #endif */
  87. .u-transition {}
  88. </style>