@semcore/animation - npm Package Compare versions

Comparing version 1.5.8 to 1.5.9

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [1.5.9] - 2022-08-29
+
+### Fixed
+
+- Fixed playing entering animation if init animation state is already reached.
+
 ## [1.5.8] - 2022-08-18
@@ -7,0 +13,0 @@

lib/cjs/Animation.js

@@ -49,15 +49,15 @@ "use strict";
 /*__inner_css_start__*/
-".___SAnimation_73ppm_gg_{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:var(--durationFinalize_73ppm);animation-duration:var(--durationFinalize_73ppm);-webkit-animation-delay:var(--delayFinalize_73ppm);animation-delay:var(--delayFinalize_73ppm);-webkit-animation-name:var(--keyframesFinalize_73ppm);animation-name:var(--keyframesFinalize_73ppm)}.___SAnimation_73ppm_gg_.__visible_73ppm_gg_{-webkit-animation-duration:var(--durationInitialize_73ppm);animation-duration:var(--durationInitialize_73ppm);-webkit-animation-delay:var(--delayInitialize_73ppm);animation-delay:var(--delayInitialize_73ppm);-webkit-animation-name:var(--keyframesInitialize_73ppm);animation-name:var(--keyframesInitialize_73ppm)}@media (prefers-reduced-motion){.___SAnimation_73ppm_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}.___SAnimation_73ppm_gg_.__visible_73ppm_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}}"
+".___SAnimation_181la_gg_{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:var(--durationFinalize_181la);animation-duration:var(--durationFinalize_181la);-webkit-animation-delay:var(--delayFinalize_181la);animation-delay:var(--delayFinalize_181la);-webkit-animation-name:var(--keyframesFinalize_181la);animation-name:var(--keyframesFinalize_181la)}.___SAnimation_181la_gg_.__visible_181la_gg_{-webkit-animation-duration:var(--durationInitialize_181la);animation-duration:var(--durationInitialize_181la);-webkit-animation-delay:var(--delayInitialize_181la);animation-delay:var(--delayInitialize_181la);-webkit-animation-name:var(--keyframesInitialize_181la);animation-name:var(--keyframesInitialize_181la)}@media (prefers-reduced-motion){.___SAnimation_181la_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}.___SAnimation_181la_gg_.__visible_181la_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "73ppm_gg_")
+, "181la_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_73ppm_gg_",
-  "--durationFinalize": "--durationFinalize_73ppm",
-  "--delayFinalize": "--delayFinalize_73ppm",
-  "--keyframesFinalize": "--keyframesFinalize_73ppm",
-  "_visible": "__visible_73ppm_gg_",
-  "--durationInitialize": "--durationInitialize_73ppm",
-  "--delayInitialize": "--delayInitialize_73ppm",
-  "--keyframesInitialize": "--keyframesInitialize_73ppm"
+  "__SAnimation": "___SAnimation_181la_gg_",
+  "--durationFinalize": "--durationFinalize_181la",
+  "--delayFinalize": "--delayFinalize_181la",
+  "--keyframesFinalize": "--keyframesFinalize_181la",
+  "_visible": "__visible_181la_gg_",
+  "--durationInitialize": "--durationInitialize_181la",
+  "--delayInitialize": "--delayInitialize_181la",
+  "--keyframesInitialize": "--keyframesInitialize_181la"
 });
@@ -85,3 +85,4 @@
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      render: _this.props.visible || _this.props.preserveNode
+      render: _this.props.visible || _this.props.preserveNode,
+      wasInvisible: !_this.props.visible
     });
@@ -112,3 +113,5 @@ (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAnimationEnd", function (e) {
       var delay = propToArray(this.asProps.delay);
-      var render = this.state.render;
+      var _this$state = this.state,
+          render = _this$state.render,
+          wasInvisible = _this$state.wasInvisible;
       if (!render) return null;
@@ -121,3 +124,3 @@ return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAnimation, _ref2.cn("SAnimation", _objectSpread({}, (0, _core.assignProps)({
         "delayFinalize": "".concat(delay[1], "ms"),
-        "keyframesInitialize": keyframes[0],
+        "keyframesInitialize": wasInvisible ? keyframes[0] : undefined,
         "keyframesFinalize": keyframes[1]
@@ -129,8 +132,18 @@ }, _ref))));
     value: function getDerivedStateFromProps(props, state) {
+      var wasInvisible = state.wasInvisible || !props.visible;
+
       if (props.visible || props.preserveNode) {
         return {
-          render: true
+          render: true,
+          wasInvisible: wasInvisible
         };
       }
 
+      if (state.wasInvisible !== wasInvisible) {
+        return {
+          render: true,
+          wasInvisible: wasInvisible
+        };
+      }
+
       return state;
@@ -137,0 +150,0 @@ }

lib/cjs/Collapse.js

@@ -38,10 +38,10 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_1t5ey{0%{overflow:hidden;height:0}to{height:var(--height_1t5ey)}}@keyframes enter_1t5ey{0%{overflow:hidden;height:0}to{height:var(--height_1t5ey)}}@-webkit-keyframes exit_1t5ey{0%{height:var(--height_1t5ey)}to{height:0}}@keyframes exit_1t5ey{0%{height:var(--height_1t5ey)}to{height:0}}"
+"@-webkit-keyframes enter_1vtsn{0%{overflow:hidden;height:0}to{height:var(--height_1vtsn)}}@keyframes enter_1vtsn{0%{overflow:hidden;height:0}to{height:var(--height_1vtsn)}}@-webkit-keyframes exit_1vtsn{0%{height:var(--height_1vtsn)}to{height:0}}@keyframes exit_1vtsn{0%{height:var(--height_1vtsn)}to{height:0}}"
 /*__inner_css_end__*/
-, "1t5ey_gg_")
+, "1vtsn_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_1t5ey",
-  "--height": "--height_1t5ey",
-  "@exit": "exit_1t5ey"
+  "@enter": "enter_1vtsn",
+  "--height": "--height_1vtsn",
+  "@exit": "exit_1vtsn"
 });
@@ -48,0 +48,0 @@

lib/cjs/FadeInOut.js

@@ -26,9 +26,9 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_16wre{0%{opacity:0}to{opacity:1}}@keyframes enter_16wre{0%{opacity:0}to{opacity:1}}@-webkit-keyframes exit_16wre{0%{opacity:1}to{opacity:0}}@keyframes exit_16wre{0%{opacity:1}to{opacity:0}}"
+"@-webkit-keyframes enter_adxsu{0%{opacity:0}to{opacity:1}}@keyframes enter_adxsu{0%{opacity:0}to{opacity:1}}@-webkit-keyframes exit_adxsu{0%{opacity:1}to{opacity:0}}@keyframes exit_adxsu{0%{opacity:1}to{opacity:0}}"
 /*__inner_css_end__*/
-, "16wre_gg_")
+, "adxsu_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_16wre",
-  "@exit": "exit_16wre"
+  "@enter": "enter_adxsu",
+  "@exit": "exit_adxsu"
 });
@@ -35,0 +35,0 @@

lib/cjs/Transform.js

@@ -30,11 +30,11 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_5zdxd{0%{transform:var(--transformStart_5zdxd)}to{transform:var(--transformEnd_5zdxd)}}@keyframes enter_5zdxd{0%{transform:var(--transformStart_5zdxd)}to{transform:var(--transformEnd_5zdxd)}}@-webkit-keyframes exit_5zdxd{0%{transform:var(--transformEnd_5zdxd)}to{transform:var(--transformStart_5zdxd)}}@keyframes exit_5zdxd{0%{transform:var(--transformEnd_5zdxd)}to{transform:var(--transformStart_5zdxd)}}"
+"@-webkit-keyframes enter_b151i{0%{transform:var(--transformStart_b151i)}to{transform:var(--transformEnd_b151i)}}@keyframes enter_b151i{0%{transform:var(--transformStart_b151i)}to{transform:var(--transformEnd_b151i)}}@-webkit-keyframes exit_b151i{0%{transform:var(--transformEnd_b151i)}to{transform:var(--transformStart_b151i)}}@keyframes exit_b151i{0%{transform:var(--transformEnd_b151i)}to{transform:var(--transformStart_b151i)}}"
 /*__inner_css_end__*/
-, "5zdxd_gg_")
+, "b151i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_5zdxd",
-  "--transformStart": "--transformStart_5zdxd",
-  "--transformEnd": "--transformEnd_5zdxd",
-  "@exit": "exit_5zdxd"
+  "@enter": "enter_b151i",
+  "--transformStart": "--transformStart_b151i",
+  "--transformEnd": "--transformEnd_b151i",
+  "@exit": "exit_b151i"
 });
@@ -41,0 +41,0 @@

lib/es6/Animation.js

@@ -28,15 +28,15 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-".___SAnimation_73ppm_gg_{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:var(--durationFinalize_73ppm);animation-duration:var(--durationFinalize_73ppm);-webkit-animation-delay:var(--delayFinalize_73ppm);animation-delay:var(--delayFinalize_73ppm);-webkit-animation-name:var(--keyframesFinalize_73ppm);animation-name:var(--keyframesFinalize_73ppm)}.___SAnimation_73ppm_gg_.__visible_73ppm_gg_{-webkit-animation-duration:var(--durationInitialize_73ppm);animation-duration:var(--durationInitialize_73ppm);-webkit-animation-delay:var(--delayInitialize_73ppm);animation-delay:var(--delayInitialize_73ppm);-webkit-animation-name:var(--keyframesInitialize_73ppm);animation-name:var(--keyframesInitialize_73ppm)}@media (prefers-reduced-motion){.___SAnimation_73ppm_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}.___SAnimation_73ppm_gg_.__visible_73ppm_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}}"
+".___SAnimation_181la_gg_{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:var(--durationFinalize_181la);animation-duration:var(--durationFinalize_181la);-webkit-animation-delay:var(--delayFinalize_181la);animation-delay:var(--delayFinalize_181la);-webkit-animation-name:var(--keyframesFinalize_181la);animation-name:var(--keyframesFinalize_181la)}.___SAnimation_181la_gg_.__visible_181la_gg_{-webkit-animation-duration:var(--durationInitialize_181la);animation-duration:var(--durationInitialize_181la);-webkit-animation-delay:var(--delayInitialize_181la);animation-delay:var(--delayInitialize_181la);-webkit-animation-name:var(--keyframesInitialize_181la);animation-name:var(--keyframesInitialize_181la)}@media (prefers-reduced-motion){.___SAnimation_181la_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}.___SAnimation_181la_gg_.__visible_181la_gg_{-webkit-animation-timing-function:step-end;animation-timing-function:step-end;-webkit-animation-iteration-count:1;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "73ppm_gg_")
+, "181la_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_73ppm_gg_",
-  "--durationFinalize": "--durationFinalize_73ppm",
-  "--delayFinalize": "--delayFinalize_73ppm",
-  "--keyframesFinalize": "--keyframesFinalize_73ppm",
-  "_visible": "__visible_73ppm_gg_",
-  "--durationInitialize": "--durationInitialize_73ppm",
-  "--delayInitialize": "--delayInitialize_73ppm",
-  "--keyframesInitialize": "--keyframesInitialize_73ppm"
+  "__SAnimation": "___SAnimation_181la_gg_",
+  "--durationFinalize": "--durationFinalize_181la",
+  "--delayFinalize": "--delayFinalize_181la",
+  "--keyframesFinalize": "--keyframesFinalize_181la",
+  "_visible": "__visible_181la_gg_",
+  "--durationInitialize": "--durationInitialize_181la",
+  "--delayInitialize": "--delayInitialize_181la",
+  "--keyframesInitialize": "--keyframesInitialize_181la"
 });
@@ -65,3 +65,4 @@
     _defineProperty(_assertThisInitialized(_this), "state", {
-      render: _this.props.visible || _this.props.preserveNode
+      render: _this.props.visible || _this.props.preserveNode,
+      wasInvisible: !_this.props.visible
     });
@@ -94,3 +95,5 @@
       var delay = propToArray(this.asProps.delay);
-      var render = this.state.render;
+      var _this$state = this.state,
+          render = _this$state.render,
+          wasInvisible = _this$state.wasInvisible;
       if (!render) return null;
@@ -103,3 +106,3 @@ return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SAnimation, _ref2.cn("SAnimation", _objectSpread({}, _assignProps({
         "delayFinalize": "".concat(delay[1], "ms"),
-        "keyframesInitialize": keyframes[0],
+        "keyframesInitialize": wasInvisible ? keyframes[0] : undefined,
         "keyframesFinalize": keyframes[1]
@@ -111,8 +114,18 @@ }, _ref))));
     value: function getDerivedStateFromProps(props, state) {
+      var wasInvisible = state.wasInvisible || !props.visible;
+
       if (props.visible || props.preserveNode) {
         return {
-          render: true
+          render: true,
+          wasInvisible: wasInvisible
         };
       }
 
+      if (state.wasInvisible !== wasInvisible) {
+        return {
+          render: true,
+          wasInvisible: wasInvisible
+        };
+      }
+
       return state;
@@ -119,0 +132,0 @@ }

lib/es6/Collapse.js

@@ -17,10 +17,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_1t5ey{0%{overflow:hidden;height:0}to{height:var(--height_1t5ey)}}@keyframes enter_1t5ey{0%{overflow:hidden;height:0}to{height:var(--height_1t5ey)}}@-webkit-keyframes exit_1t5ey{0%{height:var(--height_1t5ey)}to{height:0}}@keyframes exit_1t5ey{0%{height:var(--height_1t5ey)}to{height:0}}"
+"@-webkit-keyframes enter_1vtsn{0%{overflow:hidden;height:0}to{height:var(--height_1vtsn)}}@keyframes enter_1vtsn{0%{overflow:hidden;height:0}to{height:var(--height_1vtsn)}}@-webkit-keyframes exit_1vtsn{0%{height:var(--height_1vtsn)}to{height:0}}@keyframes exit_1vtsn{0%{height:var(--height_1vtsn)}to{height:0}}"
 /*__inner_css_end__*/
-, "1t5ey_gg_")
+, "1vtsn_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_1t5ey",
-  "--height": "--height_1t5ey",
-  "@exit": "exit_1t5ey"
+  "@enter": "enter_1vtsn",
+  "--height": "--height_1vtsn",
+  "@exit": "exit_1vtsn"
 });
@@ -27,0 +27,0 @@

lib/es6/FadeInOut.js

@@ -14,9 +14,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_16wre{0%{opacity:0}to{opacity:1}}@keyframes enter_16wre{0%{opacity:0}to{opacity:1}}@-webkit-keyframes exit_16wre{0%{opacity:1}to{opacity:0}}@keyframes exit_16wre{0%{opacity:1}to{opacity:0}}"
+"@-webkit-keyframes enter_adxsu{0%{opacity:0}to{opacity:1}}@keyframes enter_adxsu{0%{opacity:0}to{opacity:1}}@-webkit-keyframes exit_adxsu{0%{opacity:1}to{opacity:0}}@keyframes exit_adxsu{0%{opacity:1}to{opacity:0}}"
 /*__inner_css_end__*/
-, "16wre_gg_")
+, "adxsu_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_16wre",
-  "@exit": "exit_16wre"
+  "@enter": "enter_adxsu",
+  "@exit": "exit_adxsu"
 });
@@ -23,0 +23,0 @@

lib/es6/Transform.js

@@ -16,11 +16,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@-webkit-keyframes enter_5zdxd{0%{transform:var(--transformStart_5zdxd)}to{transform:var(--transformEnd_5zdxd)}}@keyframes enter_5zdxd{0%{transform:var(--transformStart_5zdxd)}to{transform:var(--transformEnd_5zdxd)}}@-webkit-keyframes exit_5zdxd{0%{transform:var(--transformEnd_5zdxd)}to{transform:var(--transformStart_5zdxd)}}@keyframes exit_5zdxd{0%{transform:var(--transformEnd_5zdxd)}to{transform:var(--transformStart_5zdxd)}}"
+"@-webkit-keyframes enter_b151i{0%{transform:var(--transformStart_b151i)}to{transform:var(--transformEnd_b151i)}}@keyframes enter_b151i{0%{transform:var(--transformStart_b151i)}to{transform:var(--transformEnd_b151i)}}@-webkit-keyframes exit_b151i{0%{transform:var(--transformEnd_b151i)}to{transform:var(--transformStart_b151i)}}@keyframes exit_b151i{0%{transform:var(--transformEnd_b151i)}to{transform:var(--transformStart_b151i)}}"
 /*__inner_css_end__*/
-, "5zdxd_gg_")
+, "b151i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_5zdxd",
-  "--transformStart": "--transformStart_5zdxd",
-  "--transformEnd": "--transformEnd_5zdxd",
-  "@exit": "exit_5zdxd"
+  "@enter": "enter_b151i",
+  "--transformStart": "--transformStart_b151i",
+  "--transformEnd": "--transformEnd_b151i",
+  "@exit": "exit_b151i"
 });
@@ -27,0 +27,0 @@

package.json

 {
   "name": "@semcore/animation",
   "description": "Semrush Animation Component",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66792

increased by3.28%

Lines of code

718

increased by3.16%

No dependency changes