uni-transition.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
  3. @click="change">
  4. <slot></slot>
  5. </view>
  6. </template>
  7. <script>
  8. // #ifdef APP-NVUE
  9. const animation = uni.requireNativePlugin('animation');
  10. // #endif
  11. /**
  12. * Transition 过渡动画
  13. * @description 简单过渡动画组件
  14. * @tutorial https://ext.dcloud.net.cn/plugin?id=985
  15. * @property {Boolean} show = [false|true] 控制组件显示或隐藏
  16. * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
  17. * @value fade 渐隐渐出过渡
  18. * @value slide-top 由上至下过渡
  19. * @value slide-right 由右至左过渡
  20. * @value slide-bottom 由下至上过渡
  21. * @value slide-left 由左至右过渡
  22. * @value zoom-in 由小到大过渡
  23. * @value zoom-out 由大到小过渡
  24. * @property {Number} duration 过渡动画持续时间
  25. * @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
  26. */
  27. export default {
  28. name: 'uniTransition',
  29. props: {
  30. show: {
  31. type: Boolean,
  32. default: false
  33. },
  34. modeClass: {
  35. type: Array,
  36. default () {
  37. return []
  38. }
  39. },
  40. duration: {
  41. type: Number,
  42. default: 300
  43. },
  44. styles: {
  45. type: Object,
  46. default () {
  47. return {}
  48. }
  49. }
  50. },
  51. data() {
  52. return {
  53. isShow: false,
  54. transform: '',
  55. ani: { in: '',
  56. active: ''
  57. }
  58. };
  59. },
  60. watch: {
  61. show: {
  62. handler(newVal) {
  63. if (newVal) {
  64. this.open()
  65. } else {
  66. this.close()
  67. }
  68. },
  69. immediate: true
  70. }
  71. },
  72. computed: {
  73. stylesObject() {
  74. let styles = {
  75. ...this.styles,
  76. 'transition-duration': this.duration / 1000 + 's'
  77. }
  78. let transfrom = ''
  79. for (let i in styles) {
  80. let line = this.toLine(i)
  81. transfrom += line + ':' + styles[i] + ';'
  82. }
  83. return transfrom
  84. }
  85. },
  86. created() {
  87. // this.timer = null
  88. // this.nextTick = (time = 50) => new Promise(resolve => {
  89. // clearTimeout(this.timer)
  90. // this.timer = setTimeout(resolve, time)
  91. // return this.timer
  92. // });
  93. },
  94. methods: {
  95. change() {
  96. this.$emit('click', {
  97. detail: this.isShow
  98. })
  99. },
  100. open() {
  101. clearTimeout(this.timer)
  102. this.isShow = true
  103. this.transform = ''
  104. this.ani.in = ''
  105. for (let i in this.getTranfrom(false)) {
  106. if (i === 'opacity') {
  107. this.ani.in = 'fade-in'
  108. } else {
  109. this.transform += `${this.getTranfrom(false)[i]} `
  110. }
  111. }
  112. this.$nextTick(() => {
  113. setTimeout(() => {
  114. this._animation(true)
  115. }, 50)
  116. })
  117. },
  118. close(type) {
  119. clearTimeout(this.timer)
  120. this._animation(false)
  121. },
  122. _animation(type) {
  123. let styles = this.getTranfrom(type)
  124. // #ifdef APP-NVUE
  125. if(!this.$refs['ani']) return
  126. animation.transition(this.$refs['ani'].ref, {
  127. styles,
  128. duration: this.duration, //ms
  129. timingFunction: 'ease',
  130. needLayout: false,
  131. delay: 0 //ms
  132. }, () => {
  133. if (!type) {
  134. this.isShow = false
  135. }
  136. this.$emit('change', {
  137. detail: this.isShow
  138. })
  139. })
  140. // #endif
  141. // #ifndef APP-NVUE
  142. this.transform = ''
  143. for (let i in styles) {
  144. if (i === 'opacity') {
  145. this.ani.in = `fade-${type?'out':'in'}`
  146. } else {
  147. this.transform += `${styles[i]} `
  148. }
  149. }
  150. this.timer = setTimeout(() => {
  151. if (!type) {
  152. this.isShow = false
  153. }
  154. this.$emit('change', {
  155. detail: this.isShow
  156. })
  157. }, this.duration)
  158. // #endif
  159. },
  160. getTranfrom(type) {
  161. let styles = {
  162. transform: ''
  163. }
  164. this.modeClass.forEach((mode) => {
  165. switch (mode) {
  166. case 'fade':
  167. styles.opacity = type ? 1 : 0
  168. break;
  169. case 'slide-top':
  170. styles.transform += `translateY(${type?'0':'-100%'}) `
  171. break;
  172. case 'slide-right':
  173. styles.transform += `translateX(${type?'0':'100%'}) `
  174. break;
  175. case 'slide-bottom':
  176. styles.transform += `translateY(${type?'0':'100%'}) `
  177. break;
  178. case 'slide-left':
  179. styles.transform += `translateX(${type?'0':'-100%'}) `
  180. break;
  181. case 'zoom-in':
  182. styles.transform += `scale(${type?1:0.8}) `
  183. break;
  184. case 'zoom-out':
  185. styles.transform += `scale(${type?1:1.2}) `
  186. break;
  187. }
  188. })
  189. return styles
  190. },
  191. _modeClassArr(type) {
  192. let mode = this.modeClass
  193. if (typeof(mode) !== "string") {
  194. let modestr = ''
  195. mode.forEach((item) => {
  196. modestr += (item + '-' + type + ',')
  197. })
  198. return modestr.substr(0, modestr.length - 1)
  199. } else {
  200. return mode + '-' + type
  201. }
  202. },
  203. // getEl(el) {
  204. // console.log(el || el.ref || null);
  205. // return el || el.ref || null
  206. // },
  207. toLine(name) {
  208. return name.replace(/([A-Z])/g, "-$1").toLowerCase();
  209. }
  210. }
  211. }
  212. </script>
  213. <style>
  214. .uni-transition {
  215. transition-timing-function: ease;
  216. transition-duration: 0.3s;
  217. transition-property: transform, opacity;
  218. }
  219. .fade-in {
  220. opacity: 0;
  221. }
  222. .fade-active {
  223. opacity: 1;
  224. }
  225. .slide-top-in {
  226. /* transition-property: transform, opacity; */
  227. transform: translateY(-100%);
  228. }
  229. .slide-top-active {
  230. transform: translateY(0);
  231. /* opacity: 1; */
  232. }
  233. .slide-right-in {
  234. transform: translateX(100%);
  235. }
  236. .slide-right-active {
  237. transform: translateX(0);
  238. }
  239. .slide-bottom-in {
  240. transform: translateY(100%);
  241. }
  242. .slide-bottom-active {
  243. transform: translateY(0);
  244. }
  245. .slide-left-in {
  246. transform: translateX(-100%);
  247. }
  248. .slide-left-active {
  249. transform: translateX(0);
  250. opacity: 1;
  251. }
  252. .zoom-in-in {
  253. transform: scale(0.8);
  254. }
  255. .zoom-out-active {
  256. transform: scale(1);
  257. }
  258. .zoom-out-in {
  259. transform: scale(1.2);
  260. }
  261. </style>