@nutui/nutui-react-taro 3.0.0-beta.12 → 3.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (253) hide show
  1. package/dist/cjs/{utils → hooks}/use-click-away.js +2 -2
  2. package/dist/cjs/{utils → hooks}/use-isomprphic-layout-effect.js +1 -1
  3. package/dist/cjs/{utils → hooks}/use-lock-scroll.js +2 -2
  4. package/dist/cjs/packages/address/address.d.ts +1 -1
  5. package/dist/cjs/packages/address/address.js +1 -1
  6. package/dist/cjs/packages/animate/animate.js +5 -6
  7. package/dist/cjs/packages/animate/style/animate.scss +63 -105
  8. package/dist/cjs/packages/animate/style/style.css +45 -44
  9. package/dist/cjs/packages/animate/style/style.harmony.css +45 -44
  10. package/dist/cjs/packages/avatarcropper/avatarcropper.js +3 -2
  11. package/dist/cjs/packages/badge/badge.js +10 -11
  12. package/dist/cjs/packages/calendar/style/calendar.scss +25 -31
  13. package/dist/cjs/packages/calendar/style/style.css +14 -20
  14. package/dist/cjs/packages/calendar/style/style.harmony.css +14 -20
  15. package/dist/cjs/packages/calendarcard/calendarcard.js +1 -1
  16. package/dist/cjs/packages/calendaritem/calendaritem.js +1 -2
  17. package/dist/cjs/packages/cascader/cascader.js +1 -1
  18. package/dist/cjs/packages/checkbox/checkbox.js +1 -1
  19. package/dist/cjs/packages/checkboxgroup/checkboxgroup.js +1 -1
  20. package/dist/cjs/packages/circleprogress/circleprogress.js +1 -1
  21. package/dist/cjs/packages/collapse/collapse.js +1 -1
  22. package/dist/cjs/packages/configprovider/configprovider.js +1 -1
  23. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  24. package/dist/cjs/packages/datepicker/datepicker.js +1 -1
  25. package/dist/cjs/packages/datepicker/style/style.css +2 -2
  26. package/dist/cjs/packages/dialog/dialog.js +2 -2
  27. package/dist/cjs/packages/drag/drag.js +3 -2
  28. package/dist/cjs/packages/elevator/elevator.js +1 -1
  29. package/dist/cjs/packages/imagepreview/imagepreview.js +1 -1
  30. package/dist/cjs/packages/input/input.js +1 -1
  31. package/dist/cjs/packages/inputnumber/inputnumber.js +1 -1
  32. package/dist/cjs/packages/lottie/mp.js +3 -2
  33. package/dist/cjs/packages/menuitem/menuitem.js +5 -4
  34. package/dist/cjs/packages/notify/notify.js +1 -1
  35. package/dist/cjs/packages/nutui.react.build.d.ts +3 -1
  36. package/dist/cjs/packages/nutui.react.build.js +122 -118
  37. package/dist/cjs/packages/nutui.react.d.ts +4 -1
  38. package/dist/cjs/packages/nutui.react.js +123 -118
  39. package/dist/cjs/packages/nutui.react.scss.d.ts +1 -0
  40. package/dist/cjs/packages/nutui.react.scss.js +1 -0
  41. package/dist/cjs/packages/overlay/overlay.js +1 -1
  42. package/dist/cjs/packages/pagination/pagination.js +1 -1
  43. package/dist/cjs/packages/picker/picker.js +2 -2
  44. package/dist/cjs/packages/picker/pickerpanel.js +1 -1
  45. package/dist/cjs/packages/picker/style/style.css +2 -2
  46. package/dist/cjs/packages/picker/style/style.harmony.css +2 -2
  47. package/dist/cjs/packages/pickerview/index.d.ts +3 -0
  48. package/dist/cjs/packages/pickerview/index.js +13 -0
  49. package/dist/cjs/packages/pickerview/pickerroller.d.ts +7 -0
  50. package/dist/cjs/packages/pickerview/pickerroller.js +186 -0
  51. package/dist/cjs/packages/pickerview/pickerview.d.ts +4 -0
  52. package/dist/cjs/packages/pickerview/pickerview.js +201 -0
  53. package/dist/cjs/packages/pickerview/style/css.js +1 -0
  54. package/dist/cjs/packages/pickerview/style/index.js +1 -0
  55. package/dist/cjs/packages/pickerview/style/pickerview.scss +79 -0
  56. package/dist/cjs/packages/pickerview/style/style.css +73 -0
  57. package/dist/cjs/packages/pickerview/style/style.harmony.css +83 -0
  58. package/dist/cjs/packages/pickerview/types.d.ts +32 -0
  59. package/dist/cjs/packages/pickerview/types.js +4 -0
  60. package/dist/cjs/packages/pickerview/utils.d.ts +14 -0
  61. package/dist/cjs/packages/pickerview/utils.js +46 -0
  62. package/dist/cjs/packages/popover/popover.d.ts +2 -2
  63. package/dist/cjs/packages/popover/popover.js +1 -1
  64. package/dist/cjs/packages/popover/types.d.ts +3 -2
  65. package/dist/cjs/packages/popup/popup.js +1 -1
  66. package/dist/cjs/packages/progress/progress.js +1 -1
  67. package/dist/cjs/packages/pulltorefresh/pulltorefresh.js +3 -2
  68. package/dist/cjs/packages/radio/radio.js +1 -1
  69. package/dist/cjs/packages/radiogroup/radiogroup.js +1 -1
  70. package/dist/cjs/packages/range/range.js +2 -2
  71. package/dist/cjs/packages/rate/rate.js +2 -2
  72. package/dist/cjs/packages/segmented/segmented.js +1 -1
  73. package/dist/cjs/packages/shortpassword/shortpassword.js +1 -1
  74. package/dist/cjs/packages/sidebar/sidebar.js +3 -3
  75. package/dist/cjs/packages/sticky/sticky.js +3 -2
  76. package/dist/cjs/packages/swipe/swipe.js +2 -2
  77. package/dist/cjs/packages/switch/switch.js +1 -1
  78. package/dist/cjs/packages/tabbar/style/style.css +2 -9
  79. package/dist/cjs/packages/tabbar/tabbar.js +1 -1
  80. package/dist/cjs/packages/tabbaritem/style/style.css +2 -9
  81. package/dist/cjs/packages/tabbaritem/style/style.harmony.css +1 -1
  82. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +2 -10
  83. package/dist/cjs/packages/tabbaritem/tabbaritem.js +9 -11
  84. package/dist/cjs/packages/table/table.js +1 -1
  85. package/dist/cjs/packages/tabs/tabs.js +3 -3
  86. package/dist/cjs/packages/textarea/textarea.d.ts +3 -3
  87. package/dist/cjs/packages/textarea/textarea.js +19 -22
  88. package/dist/cjs/packages/toast/toast.js +2 -2
  89. package/dist/cjs/packages/tour/tour.d.ts +1 -1
  90. package/dist/cjs/packages/tour/tour.js +1 -1
  91. package/dist/cjs/packages/uploader/types.d.ts +2 -1
  92. package/dist/cjs/packages/uploader/uploader.js +1 -1
  93. package/dist/cjs/packages/virtuallist/virtuallist.js +2 -2
  94. package/dist/cjs/utils/get-rect-by-taro.js +1 -1
  95. package/dist/cjs/utils/get-system-info.d.ts +19 -0
  96. package/dist/cjs/utils/get-system-info.js +32 -0
  97. package/dist/es/{utils → hooks}/use-click-away.js +3 -2
  98. package/dist/es/{utils → hooks}/use-isomprphic-layout-effect.js +1 -1
  99. package/dist/es/{utils → hooks}/use-lock-scroll.js +2 -2
  100. package/dist/es/packages/address/address.d.ts +1 -1
  101. package/dist/es/packages/address/address.js +1 -1
  102. package/dist/es/packages/animate/animate.js +5 -6
  103. package/dist/es/packages/animate/style/animate.scss +63 -105
  104. package/dist/es/packages/animate/style/style.css +45 -44
  105. package/dist/es/packages/animate/style/style.harmony.css +45 -44
  106. package/dist/es/packages/audio/audio.d.ts +30 -10
  107. package/dist/es/packages/avatarcropper/avatarcropper.js +3 -2
  108. package/dist/es/packages/badge/badge.js +10 -11
  109. package/dist/es/packages/calendar/calendar.d.ts +27 -135
  110. package/dist/es/packages/calendar/style/calendar.scss +25 -31
  111. package/dist/es/packages/calendar/style/style.css +14 -20
  112. package/dist/es/packages/calendar/style/style.harmony.css +14 -20
  113. package/dist/es/packages/calendarcard/calendarcard.js +1 -1
  114. package/dist/es/packages/calendaritem/calendaritem.js +1 -2
  115. package/dist/es/packages/cascader/cascader.js +1 -1
  116. package/dist/es/packages/checkbox/checkbox.js +1 -1
  117. package/dist/es/packages/checkboxgroup/checkboxgroup.js +1 -1
  118. package/dist/es/packages/circleprogress/circleprogress.d.ts +1 -1
  119. package/dist/es/packages/circleprogress/circleprogress.js +1 -1
  120. package/dist/es/packages/collapse/collapse.js +1 -1
  121. package/dist/es/packages/configprovider/configprovider.js +1 -1
  122. package/dist/es/packages/configprovider/types.d.ts +1 -1
  123. package/dist/es/packages/datepicker/datepicker.js +1 -1
  124. package/dist/es/packages/datepicker/style/style.css +2 -2
  125. package/dist/es/packages/dialog/dialog.js +2 -2
  126. package/dist/es/packages/drag/drag.js +4 -3
  127. package/dist/es/packages/elevator/elevator.js +1 -1
  128. package/dist/es/packages/form/form.d.ts +1 -1
  129. package/dist/es/packages/imagepreview/imagepreview.js +1 -1
  130. package/dist/es/packages/input/input.js +1 -1
  131. package/dist/es/packages/inputnumber/inputnumber.js +1 -1
  132. package/dist/es/packages/lottie/mp.js +4 -3
  133. package/dist/es/packages/menuitem/menuitem.js +6 -5
  134. package/dist/es/packages/noticebar/noticebar.d.ts +1 -1
  135. package/dist/es/packages/notify/notify.js +1 -1
  136. package/dist/es/packages/nutui.react.build.d.ts +3 -1
  137. package/dist/es/packages/nutui.react.build.js +3 -1
  138. package/dist/es/packages/overlay/overlay.js +1 -1
  139. package/dist/es/packages/pagination/pagination.js +1 -1
  140. package/dist/es/packages/picker/picker.js +2 -2
  141. package/dist/es/packages/picker/pickerpanel.js +1 -1
  142. package/dist/es/packages/picker/style/style.css +2 -2
  143. package/dist/es/packages/picker/style/style.harmony.css +2 -2
  144. package/dist/es/packages/pickerview/index.d.ts +3 -0
  145. package/dist/es/packages/pickerview/index.js +2 -0
  146. package/dist/es/packages/pickerview/pickerroller.d.ts +7 -0
  147. package/dist/es/packages/pickerview/pickerroller.js +175 -0
  148. package/dist/es/packages/pickerview/pickerview.d.ts +4 -0
  149. package/dist/es/packages/pickerview/pickerview.js +189 -0
  150. package/dist/es/packages/pickerview/style/css.js +1 -0
  151. package/dist/es/packages/pickerview/style/index.js +1 -0
  152. package/dist/es/packages/pickerview/style/pickerview.scss +79 -0
  153. package/dist/es/packages/pickerview/style/style.css +73 -0
  154. package/dist/es/packages/pickerview/style/style.harmony.css +83 -0
  155. package/dist/es/packages/pickerview/types.d.ts +32 -0
  156. package/dist/es/packages/pickerview/types.js +1 -0
  157. package/dist/es/packages/pickerview/utils.d.ts +14 -0
  158. package/dist/es/packages/pickerview/utils.js +28 -0
  159. package/dist/es/packages/popover/popover.d.ts +2 -2
  160. package/dist/es/packages/popover/popover.js +1 -1
  161. package/dist/es/packages/popover/types.d.ts +3 -2
  162. package/dist/es/packages/popup/popup.js +1 -1
  163. package/dist/es/packages/progress/progress.js +1 -1
  164. package/dist/es/packages/pulltorefresh/pulltorefresh.js +3 -2
  165. package/dist/es/packages/radio/radio.js +1 -1
  166. package/dist/es/packages/radiogroup/radiogroup.js +1 -1
  167. package/dist/es/packages/range/range.js +2 -2
  168. package/dist/es/packages/rate/rate.js +2 -2
  169. package/dist/es/packages/segmented/segmented.js +1 -1
  170. package/dist/es/packages/shortpassword/shortpassword.js +1 -1
  171. package/dist/es/packages/sidebar/sidebar.js +3 -3
  172. package/dist/es/packages/sticky/sticky.js +4 -3
  173. package/dist/es/packages/swipe/swipe.js +2 -2
  174. package/dist/es/packages/switch/switch.js +1 -1
  175. package/dist/es/packages/tabbar/style/style.css +2 -9
  176. package/dist/es/packages/tabbar/tabbar.js +1 -1
  177. package/dist/es/packages/tabbaritem/style/style.css +2 -9
  178. package/dist/es/packages/tabbaritem/style/style.harmony.css +1 -1
  179. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +2 -10
  180. package/dist/es/packages/tabbaritem/tabbaritem.js +9 -11
  181. package/dist/es/packages/table/table.js +1 -1
  182. package/dist/es/packages/tabs/tabs.js +3 -3
  183. package/dist/es/packages/textarea/textarea.d.ts +3 -3
  184. package/dist/es/packages/textarea/textarea.js +20 -23
  185. package/dist/es/packages/toast/toast.js +2 -2
  186. package/dist/es/packages/tour/tour.d.ts +1 -1
  187. package/dist/es/packages/tour/tour.js +1 -1
  188. package/dist/es/packages/uploader/types.d.ts +2 -1
  189. package/dist/es/packages/uploader/uploader.js +1 -1
  190. package/dist/es/packages/virtuallist/virtuallist.d.ts +1 -1
  191. package/dist/es/packages/virtuallist/virtuallist.js +2 -2
  192. package/dist/es/utils/get-rect-by-taro.js +1 -1
  193. package/dist/es/utils/get-system-info.d.ts +19 -0
  194. package/dist/es/utils/get-system-info.js +19 -0
  195. package/dist/nutui.react.umd.js +529 -172
  196. package/dist/style.css +1 -1
  197. package/dist/style.scss +24 -23
  198. package/dist/styles/variables.scss +3 -1
  199. package/package.json +1 -80
  200. /package/dist/cjs/{utils → hooks}/use-click-away.d.ts +0 -0
  201. /package/dist/cjs/{utils → hooks}/use-client-rect.d.ts +0 -0
  202. /package/dist/cjs/{utils → hooks}/use-client-rect.js +0 -0
  203. /package/dist/cjs/{utils → hooks}/use-custom-event.d.ts +0 -0
  204. /package/dist/cjs/{utils → hooks}/use-custom-event.js +0 -0
  205. /package/dist/cjs/{utils → hooks}/use-force-update.d.ts +0 -0
  206. /package/dist/cjs/{utils → hooks}/use-force-update.js +0 -0
  207. /package/dist/cjs/{utils → hooks}/use-isomprphic-layout-effect.d.ts +0 -0
  208. /package/dist/cjs/{utils → hooks}/use-lock-scoll-taro.d.ts +0 -0
  209. /package/dist/cjs/{utils → hooks}/use-lock-scoll-taro.js +0 -0
  210. /package/dist/cjs/{utils → hooks}/use-lock-scroll.d.ts +0 -0
  211. /package/dist/cjs/{utils → hooks}/use-memo.d.ts +0 -0
  212. /package/dist/cjs/{utils → hooks}/use-memo.js +0 -0
  213. /package/dist/cjs/{utils → hooks}/use-props-value.d.ts +0 -0
  214. /package/dist/cjs/{utils → hooks}/use-props-value.js +0 -0
  215. /package/dist/cjs/{utils → hooks}/use-ref-state.d.ts +0 -0
  216. /package/dist/cjs/{utils → hooks}/use-ref-state.js +0 -0
  217. /package/dist/cjs/{utils → hooks}/use-refs.d.ts +0 -0
  218. /package/dist/cjs/{utils → hooks}/use-refs.js +0 -0
  219. /package/dist/cjs/{utils → hooks}/use-taro-rect.d.ts +0 -0
  220. /package/dist/cjs/{utils → hooks}/use-taro-rect.js +0 -0
  221. /package/dist/cjs/{utils → hooks}/use-touch.d.ts +0 -0
  222. /package/dist/cjs/{utils → hooks}/use-touch.js +0 -0
  223. /package/dist/cjs/{utils → hooks}/use-uuid.d.ts +0 -0
  224. /package/dist/cjs/{utils → hooks}/use-uuid.js +0 -0
  225. /package/dist/cjs/{utils → hooks}/use-watch.d.ts +0 -0
  226. /package/dist/cjs/{utils → hooks}/use-watch.js +0 -0
  227. /package/dist/es/{utils → hooks}/use-click-away.d.ts +0 -0
  228. /package/dist/es/{utils → hooks}/use-client-rect.d.ts +0 -0
  229. /package/dist/es/{utils → hooks}/use-client-rect.js +0 -0
  230. /package/dist/es/{utils → hooks}/use-custom-event.d.ts +0 -0
  231. /package/dist/es/{utils → hooks}/use-custom-event.js +0 -0
  232. /package/dist/es/{utils → hooks}/use-force-update.d.ts +0 -0
  233. /package/dist/es/{utils → hooks}/use-force-update.js +0 -0
  234. /package/dist/es/{utils → hooks}/use-isomprphic-layout-effect.d.ts +0 -0
  235. /package/dist/es/{utils → hooks}/use-lock-scoll-taro.d.ts +0 -0
  236. /package/dist/es/{utils → hooks}/use-lock-scoll-taro.js +0 -0
  237. /package/dist/es/{utils → hooks}/use-lock-scroll.d.ts +0 -0
  238. /package/dist/es/{utils → hooks}/use-memo.d.ts +0 -0
  239. /package/dist/es/{utils → hooks}/use-memo.js +0 -0
  240. /package/dist/es/{utils → hooks}/use-props-value.d.ts +0 -0
  241. /package/dist/es/{utils → hooks}/use-props-value.js +0 -0
  242. /package/dist/es/{utils → hooks}/use-ref-state.d.ts +0 -0
  243. /package/dist/es/{utils → hooks}/use-ref-state.js +0 -0
  244. /package/dist/es/{utils → hooks}/use-refs.d.ts +0 -0
  245. /package/dist/es/{utils → hooks}/use-refs.js +0 -0
  246. /package/dist/es/{utils → hooks}/use-taro-rect.d.ts +0 -0
  247. /package/dist/es/{utils → hooks}/use-taro-rect.js +0 -0
  248. /package/dist/es/{utils → hooks}/use-touch.d.ts +0 -0
  249. /package/dist/es/{utils → hooks}/use-touch.js +0 -0
  250. /package/dist/es/{utils → hooks}/use-uuid.d.ts +0 -0
  251. /package/dist/es/{utils → hooks}/use-uuid.js +0 -0
  252. /package/dist/es/{utils → hooks}/use-watch.d.ts +0 -0
  253. /package/dist/es/{utils → hooks}/use-watch.js +0 -0
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "default", {
9
9
  }
10
10
  });
11
11
  var _react = require("react");
12
- var _index = require("./index");
12
+ var _utils = require("../utils");
13
13
  var getTargetElement = function getTargetElement(target) {
14
14
  var targetElement;
15
- if ((0, _index.isFunction)(target)) {
15
+ if ((0, _utils.isFunction)(target)) {
16
16
  targetElement = target();
17
17
  } else if ('current' in target) {
18
18
  targetElement = target.current;
@@ -9,5 +9,5 @@ Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
9
9
  }
10
10
  });
11
11
  var _react = require("react");
12
- var _canusedom = require("./can-use-dom");
12
+ var _canusedom = require("../utils/can-use-dom");
13
13
  var useIsomorphicLayoutEffect = _canusedom.canUseDom ? _react.useLayoutEffect : _react.useEffect;
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "useLockScroll", {
10
10
  });
11
11
  var _react = require("react");
12
12
  var _usetouch = require("./use-touch");
13
- var _getscrollparent = require("./get-scroll-parent");
14
- var _supportspassive = require("./supports-passive");
13
+ var _getscrollparent = require("../utils/get-scroll-parent");
14
+ var _supportspassive = require("../utils/supports-passive");
15
15
  var totalLockCount = 0;
16
16
  var BODY_LOCK_CLASS = 'nut-overflow-hidden';
17
17
  function getScrollableElement(el) {
@@ -25,5 +25,5 @@ export interface AddressProps extends CascaderProps {
25
25
  }) => void;
26
26
  onExistSelect?: (data: AddressList) => void;
27
27
  }
28
- export declare const Address: React.ForwardRefExoticComponent<Partial<AddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "title" | "defaultValue" | "onChange" | "onLoad"> & React.RefAttributes<AddressRef>>;
28
+ export declare const Address: React.ForwardRefExoticComponent<Partial<AddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "title" | "onClick" | "onLoad"> & React.RefAttributes<AddressRef>>;
29
29
  export {};
@@ -22,7 +22,7 @@ var _existRender = require("./existRender");
22
22
  var _customRender = require("./customRender");
23
23
  var _index1 = require("../configprovider/index");
24
24
  var _typings = require("../../utils/typings");
25
- var _usepropsvalue = require("../../utils/use-props-value");
25
+ var _usepropsvalue = require("../../hooks/use-props-value");
26
26
  var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
27
27
  defaultValue: [],
28
28
  type: 'custom',
@@ -24,29 +24,28 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
24
24
  loop: false,
25
25
  onClick: function onClick(event) {}
26
26
  });
27
- var classPrefix = "nut-animate";
27
+ var classPrefix = 'nut-animate';
28
28
  var Animate = function Animate(props) {
29
29
  var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, type = _$_object_spread.type, action = _$_object_spread.action, loop = _$_object_spread.loop, onClick = _$_object_spread.onClick, children = _$_object_spread.children, style = _$_object_spread.style;
30
30
  var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), clicked = _useState[0], setClicked = _useState[1];
31
31
  var _obj;
32
32
  var classes = (0, _classnames.default)((_obj = {
33
33
  'nut-ani-container': true
34
- }, (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), action === 'initial' || clicked ? type : false), (0, _define_property._)(_obj, "loop", loop), _obj));
35
- var cls = (0, _classnames.default)(classes, className);
34
+ }, (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), action === 'initial' || clicked), (0, _define_property._)(_obj, "loop", loop), _obj), className);
36
35
  var handleClick = function handleClick(event) {
37
36
  setClicked(true);
38
37
  // 如果不是无限循环,清除类名
39
38
  if (!loop) {
40
39
  setTimeout(function() {
41
- setClicked(false);
40
+ return setClicked(false);
42
41
  }, 1000);
43
42
  }
44
- onClick && onClick(event);
43
+ onClick(event);
45
44
  };
46
45
  return /*#__PURE__*/ _react.default.createElement(_components.View, {
47
46
  className: "nut-animate"
48
47
  }, /*#__PURE__*/ _react.default.createElement(_components.View, {
49
- className: cls,
48
+ className: classes,
50
49
  onClick: handleClick,
51
50
  style: style
52
51
  }, children));
@@ -1,185 +1,161 @@
1
1
  .nut-animate {
2
- /* Animation css */
2
+ /* Animation CSS */
3
3
  [class*='nut-animate-'] {
4
4
  animation-duration: 0.5s;
5
5
  animation-timing-function: ease-out;
6
6
  animation-fill-mode: both;
7
7
  }
8
8
 
9
- //右侧向左侧划入
10
- .nut-animate-slide-right {
11
- animation-name: slide-right;
12
- }
13
-
9
+ /* Slide Animations */
14
10
  @keyframes slide-right {
15
11
  0% {
16
12
  opacity: 0;
17
13
  transform: translateX(100%);
18
14
  }
19
-
20
15
  100% {
21
16
  opacity: 1;
22
17
  transform: translateX(0);
23
18
  }
24
19
  }
25
20
 
26
- //左侧向右侧划入
27
- .nut-animate-slide-left {
28
- animation-name: slide-left;
29
- }
30
-
31
21
  @keyframes slide-left {
32
22
  0% {
33
23
  opacity: 0;
34
24
  transform: translateX(-100%);
35
25
  }
36
-
37
26
  100% {
38
27
  opacity: 1;
39
28
  transform: translateX(0);
40
29
  }
41
30
  }
42
31
 
43
- //上面向下面划入
44
- .nut-animate-slide-top {
45
- animation-name: slide-top;
46
- }
47
-
48
32
  @keyframes slide-top {
49
33
  0% {
50
34
  opacity: 0;
51
35
  transform: translateY(-100%);
52
36
  }
53
-
54
37
  100% {
55
38
  opacity: 1;
56
39
  transform: translateY(0);
57
40
  }
58
41
  }
59
42
 
60
- //下面向上面划入
61
- .nut-animate-slide-bottom {
62
- animation-name: slide-bottom;
63
- }
64
-
65
43
  @keyframes slide-bottom {
66
44
  0% {
67
45
  opacity: 0;
68
46
  transform: translateY(100%);
69
47
  }
70
-
71
48
  100% {
72
49
  opacity: 1;
73
50
  transform: translateY(0);
74
51
  }
75
52
  }
76
53
 
77
- //抖动
78
- .nut-animate-shake {
79
- animation-name: shake;
54
+ // Assign slide animations
55
+ // 右侧向左侧滑入
56
+ .nut-animate-slide-right {
57
+ animation-name: slide-right;
58
+ }
59
+ // 左侧向右侧滑入
60
+ .nut-animate-slide-left {
61
+ animation-name: slide-left;
62
+ }
63
+ // 上面向下面滑入
64
+ .nut-animate-slide-top {
65
+ animation-name: slide-top;
66
+ }
67
+ // 下面向上面滑入
68
+ .nut-animate-slide-bottom {
69
+ animation-name: slide-bottom;
80
70
  }
81
71
 
72
+ /* Shake Animation */
82
73
  @keyframes shake {
83
74
  0%,
84
75
  100% {
85
76
  transform: translateX(0);
86
77
  }
87
-
88
78
  10% {
89
79
  transform: translateX(-9px);
90
80
  }
91
-
92
81
  20% {
93
82
  transform: translateX(8px);
94
83
  }
95
-
96
84
  30% {
97
85
  transform: translateX(-7px);
98
86
  }
99
-
100
87
  40% {
101
88
  transform: translateX(6px);
102
89
  }
103
-
104
90
  50% {
105
91
  transform: translateX(-5px);
106
92
  }
107
-
108
93
  60% {
109
94
  transform: translateX(4px);
110
95
  }
111
-
112
96
  70% {
113
97
  transform: translateX(-3px);
114
98
  }
115
-
116
99
  80% {
117
100
  transform: translateX(2px);
118
101
  }
119
-
120
102
  90% {
121
103
  transform: translateX(-1px);
122
104
  }
123
105
  }
124
-
125
- //心跳
126
- .nut-animate-ripple {
127
- animation-name: ripple;
106
+ .nut-animate-shake {
107
+ animation-name: shake;
128
108
  }
129
109
 
110
+ /* Ripple Animation */
130
111
  @keyframes ripple {
131
112
  0% {
132
113
  transform: scale(1);
133
114
  }
134
-
135
115
  50% {
136
116
  transform: scale(1.1);
137
117
  }
138
118
  }
139
-
140
- //呼吸灯
141
- .nut-animate-breath {
142
- animation-name: breath;
143
- animation-duration: 2700ms;
144
- animation-timing-function: ease-in-out;
145
- animation-direction: alternate;
119
+ .nut-animate-ripple {
120
+ animation-name: ripple;
146
121
  }
147
122
 
123
+ /* Breath Animation */
148
124
  @keyframes breath {
149
- 0% {
125
+ 0%,
126
+ 100% {
150
127
  transform: scale(1);
151
128
  }
152
-
153
129
  50% {
154
130
  transform: scale(1.1);
155
131
  }
156
-
157
- 100% {
158
- transform: scale(1);
159
- }
132
+ }
133
+ .nut-animate-breath {
134
+ animation-name: breath;
135
+ animation-duration: 2700ms;
136
+ animation-timing-function: ease-in-out;
137
+ animation-direction: alternate;
160
138
  }
161
139
 
162
- // 水波
140
+ /* Twinkle Animation */
163
141
  .nut-animate-twinkle {
164
142
  position: relative;
165
-
166
143
  &::after,
167
144
  &::before {
168
- width: 60 * 1px;
169
- height: 60 * 1px;
145
+ width: 60px;
146
+ height: 60px;
170
147
  content: '';
171
148
  box-sizing: border-box;
172
- border: 4 * 1px solid rgba(255, 255, 255, 0.6);
149
+ border: 4px solid rgba(255, 255, 255, 0.6);
173
150
  position: absolute;
174
- border-radius: calc(60 / 2) * 1px;
151
+ border-radius: 30px;
175
152
  right: 50%;
176
- margin-top: calc(-30 / 2) * 1px;
177
- margin-right: calc(-60 / 2) * 1px;
153
+ margin-top: -30px;
154
+ margin-right: -30px;
178
155
  z-index: 1;
179
156
  transform: scale(0);
180
157
  animation: twinkle 2s ease-out infinite;
181
158
  }
182
-
183
159
  &::after {
184
160
  animation-delay: 0.4s;
185
161
  }
@@ -189,11 +165,9 @@
189
165
  0% {
190
166
  transform: scale(0);
191
167
  }
192
-
193
168
  20% {
194
169
  opacity: 1;
195
170
  }
196
-
197
171
  50%,
198
172
  100% {
199
173
  transform: scale(1.4);
@@ -201,13 +175,13 @@
201
175
  }
202
176
  }
203
177
 
178
+ /* Flicker Animation */
204
179
  .nut-animate-flicker {
205
180
  position: relative;
206
181
  overflow: hidden;
207
-
208
182
  &::after {
209
- width: 100 * 1px;
210
- height: 60 * 1px;
183
+ width: 100px;
184
+ height: 60px;
211
185
  position: absolute;
212
186
  left: 0;
213
187
  top: 0;
@@ -220,83 +194,67 @@
220
194
  );
221
195
  animation: flicker 1.5s linear infinite;
222
196
  transform: skewX(-20deg);
223
- filter: blur(3 * 1px);
197
+ filter: blur(3px);
224
198
  }
225
199
  }
226
200
 
227
201
  @keyframes flicker {
228
202
  0% {
229
- transform: translateX(-100 * 1px) skewX(-20deg);
203
+ transform: translateX(-100px) skewX(-20deg);
230
204
  }
231
-
232
205
  40%,
233
206
  100% {
234
- transform: translateX(150 * 1px) skewX(-20deg);
207
+ transform: translateX(150px) skewX(-20deg);
235
208
  }
236
209
  }
237
210
 
238
- // jump-跳跃
239
- .nut-animate-jump {
240
- transform-origin: center center;
241
- animation: jump 0.7s linear;
242
- }
243
-
211
+ /* Jump Animation */
244
212
  @keyframes jump {
245
213
  0% {
246
- animation-timing-function: ease-in;
247
- transform: rotate(0deg) translateY(0);
214
+ transform: rotate(0) translateY(0);
248
215
  }
249
-
250
216
  25% {
251
- animation-timing-function: ease-out;
252
- transform: rotate(10deg) translateY(20 * 1px);
217
+ transform: rotate(10deg) translateY(20px);
253
218
  }
254
-
255
219
  50% {
256
- animation-timing-function: ease-in;
257
- transform: rotate(0deg) translateY(-10 * 1px);
220
+ transform: rotate(0) translateY(-10px);
258
221
  }
259
-
260
222
  75% {
261
- animation-timing-function: ease-out;
262
- transform: rotate(-10deg) translateY(20 * 1px);
223
+ transform: rotate(-10deg) translateY(20px);
263
224
  }
264
-
265
225
  100% {
266
- animation-timing-function: ease-in;
267
- transform: rotate(0deg) translateY(0);
226
+ transform: rotate(0) translateY(0);
268
227
  }
269
228
  }
270
-
271
- // 漂浮
272
- .nut-animate-float {
273
- position: relative;
274
- animation-name: float-pop;
229
+ .nut-animate-jump {
230
+ transform-origin: center center;
231
+ animation: jump 0.7s linear;
275
232
  }
276
233
 
234
+ /* Float Animation */
277
235
  @keyframes float-pop {
278
236
  0% {
279
- top: 0px;
237
+ top: 0;
280
238
  }
281
-
282
239
  25% {
283
240
  top: 1px;
284
241
  }
285
-
286
242
  50% {
287
243
  top: 4px;
288
244
  }
289
-
290
245
  75% {
291
246
  top: 1px;
292
247
  }
293
-
294
248
  100% {
295
- top: 0px;
249
+ top: 0;
296
250
  }
297
251
  }
252
+ .nut-animate-float {
253
+ position: relative;
254
+ animation-name: float-pop;
255
+ }
298
256
 
299
- //循环
257
+ /* Loop Animation */
300
258
  .loop {
301
259
  animation-iteration-count: infinite;
302
260
  }
@@ -3,16 +3,22 @@
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
5
  .nut-animate {
6
- /* Animation css */
6
+ /* Animation CSS */
7
+ /* Slide Animations */
8
+ /* Shake Animation */
9
+ /* Ripple Animation */
10
+ /* Breath Animation */
11
+ /* Twinkle Animation */
12
+ /* Flicker Animation */
13
+ /* Jump Animation */
14
+ /* Float Animation */
15
+ /* Loop Animation */
7
16
  }
8
17
  .nut-animate [class*=nut-animate-] {
9
18
  animation-duration: 0.5s;
10
19
  animation-timing-function: ease-out;
11
20
  animation-fill-mode: both;
12
21
  }
13
- .nut-animate .nut-animate-slide-right {
14
- animation-name: slide-right;
15
- }
16
22
  @keyframes slide-right {
17
23
  0% {
18
24
  opacity: 0;
@@ -23,9 +29,6 @@
23
29
  transform: translateX(0);
24
30
  }
25
31
  }
26
- .nut-animate .nut-animate-slide-left {
27
- animation-name: slide-left;
28
- }
29
32
  @keyframes slide-left {
30
33
  0% {
31
34
  opacity: 0;
@@ -36,9 +39,6 @@
36
39
  transform: translateX(0);
37
40
  }
38
41
  }
39
- .nut-animate .nut-animate-slide-top {
40
- animation-name: slide-top;
41
- }
42
42
  @keyframes slide-top {
43
43
  0% {
44
44
  opacity: 0;
@@ -49,9 +49,6 @@
49
49
  transform: translateY(0);
50
50
  }
51
51
  }
52
- .nut-animate .nut-animate-slide-bottom {
53
- animation-name: slide-bottom;
54
- }
55
52
  @keyframes slide-bottom {
56
53
  0% {
57
54
  opacity: 0;
@@ -62,8 +59,17 @@
62
59
  transform: translateY(0);
63
60
  }
64
61
  }
65
- .nut-animate .nut-animate-shake {
66
- animation-name: shake;
62
+ .nut-animate .nut-animate-slide-right {
63
+ animation-name: slide-right;
64
+ }
65
+ .nut-animate .nut-animate-slide-left {
66
+ animation-name: slide-left;
67
+ }
68
+ .nut-animate .nut-animate-slide-top {
69
+ animation-name: slide-top;
70
+ }
71
+ .nut-animate .nut-animate-slide-bottom {
72
+ animation-name: slide-bottom;
67
73
  }
68
74
  @keyframes shake {
69
75
  0%, 100% {
@@ -97,8 +103,8 @@
97
103
  transform: translateX(-1px);
98
104
  }
99
105
  }
100
- .nut-animate .nut-animate-ripple {
101
- animation-name: ripple;
106
+ .nut-animate .nut-animate-shake {
107
+ animation-name: shake;
102
108
  }
103
109
  @keyframes ripple {
104
110
  0% {
@@ -108,22 +114,22 @@
108
114
  transform: scale(1.1);
109
115
  }
110
116
  }
111
- .nut-animate .nut-animate-breath {
112
- animation-name: breath;
113
- animation-duration: 2700ms;
114
- animation-timing-function: ease-in-out;
115
- animation-direction: alternate;
117
+ .nut-animate .nut-animate-ripple {
118
+ animation-name: ripple;
116
119
  }
117
120
  @keyframes breath {
118
- 0% {
121
+ 0%, 100% {
119
122
  transform: scale(1);
120
123
  }
121
124
  50% {
122
125
  transform: scale(1.1);
123
126
  }
124
- 100% {
125
- transform: scale(1);
126
- }
127
+ }
128
+ .nut-animate .nut-animate-breath {
129
+ animation-name: breath;
130
+ animation-duration: 2700ms;
131
+ animation-timing-function: ease-in-out;
132
+ animation-direction: alternate;
127
133
  }
128
134
  .nut-animate .nut-animate-twinkle {
129
135
  position: relative;
@@ -137,7 +143,7 @@
137
143
  position: absolute;
138
144
  border-radius: 30px;
139
145
  right: 50%;
140
- margin-top: -15px;
146
+ margin-top: -30px;
141
147
  margin-right: -30px;
142
148
  z-index: 1;
143
149
  transform: scale(0);
@@ -183,39 +189,30 @@
183
189
  transform: translateX(150px) skewX(-20deg);
184
190
  }
185
191
  }
186
- .nut-animate .nut-animate-jump {
187
- transform-origin: center center;
188
- animation: jump 0.7s linear;
189
- }
190
192
  @keyframes jump {
191
193
  0% {
192
- animation-timing-function: ease-in;
193
- transform: rotate(0deg) translateY(0);
194
+ transform: rotate(0) translateY(0);
194
195
  }
195
196
  25% {
196
- animation-timing-function: ease-out;
197
197
  transform: rotate(10deg) translateY(20px);
198
198
  }
199
199
  50% {
200
- animation-timing-function: ease-in;
201
- transform: rotate(0deg) translateY(-10px);
200
+ transform: rotate(0) translateY(-10px);
202
201
  }
203
202
  75% {
204
- animation-timing-function: ease-out;
205
203
  transform: rotate(-10deg) translateY(20px);
206
204
  }
207
205
  100% {
208
- animation-timing-function: ease-in;
209
- transform: rotate(0deg) translateY(0);
206
+ transform: rotate(0) translateY(0);
210
207
  }
211
208
  }
212
- .nut-animate .nut-animate-float {
213
- position: relative;
214
- animation-name: float-pop;
209
+ .nut-animate .nut-animate-jump {
210
+ transform-origin: center center;
211
+ animation: jump 0.7s linear;
215
212
  }
216
213
  @keyframes float-pop {
217
214
  0% {
218
- top: 0px;
215
+ top: 0;
219
216
  }
220
217
  25% {
221
218
  top: 1px;
@@ -227,9 +224,13 @@
227
224
  top: 1px;
228
225
  }
229
226
  100% {
230
- top: 0px;
227
+ top: 0;
231
228
  }
232
229
  }
230
+ .nut-animate .nut-animate-float {
231
+ position: relative;
232
+ animation-name: float-pop;
233
+ }
233
234
  .nut-animate .loop {
234
235
  animation-iteration-count: infinite;
235
236
  }