nuke-transition - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

docs/basic.md

@@ -17,2 +17,3 @@ # Transiton Demo
 import Env from 'nuke-env';
+import Page from 'nuke-page';
 import Transition from 'nuke-transition';
@@ -37,5 +38,5 @@ import Button from 'nuke-button';
         Transition(box, styles, {
-            timingFunction: 'linear',
+            timingFunction: 'ease-in-out',//ease-in,ease-in-out,ease-out,linear,cubic-bezier
             delay: 0,
-            duration: 500
+            duration: 200
         }, function() {
@@ -54,2 +55,3 @@ cb && cb.call(this);
     translate=()=>{
+        // 150 单位是rem，组件将自动在 h5 下转换为对应的 px 值并加上 px 单位
         let styles = this.state.translate ? {transform: 'translate(150,150)'} : {transform: 'translate(0, 0)'}
@@ -76,22 +78,11 @@
     }
-    overlay=()=>{
-        let styles = this.state.showOverlay ? { opacity: '0',bottom :'-700rem'} : { opacity: '1',bottom :'0'}
-        const box = findDOMNode(this.refs.overlay);
-        Transition(box, styles, {
-            timingFunction: 'linear',
-            delay: 0,
-            duration: 500
-        }, ()=>{
-            this.setState({showOverlay : !this.state.showOverlay})
-        });
-        
-    }
+
        
     render() {
         return (
-            <View>
-                <View style={styles.st}><Text style={styles.stText}>基础用法</Text></View>
+            <Page title="Transition">
+                <Page.Intro main="基础用法"></Page.Intro>
                 <View style={styles.wrapper}>
                     <View ref="box" style={styles.box}>
-                        <Image style={styles.pic} source={{uri:'https://img.alicdn.com/tfs/TB1gaj.PXXXXXaHaXXXXXXXXXXX-200-200.png'}} />
+                       
                     </View>
@@ -105,6 +96,5 @@ </View>
                 </Button.Group>
-                <Button style={{marginTop:'20rem'}} type="primary" onPress={this.overlay.bind(this)}>展示/关闭浮层</Button>
-                <View ref="overlay" style={[styles.overlay]}><Text>浮层内容区</Text></View>
-            </View>
 
+            </Page>
+
         );
@@ -125,10 +115,6 @@ }
     box:{
-        width: '200rem',
-        height: '200rem',
-        borderWidth:1,
-        borderStyle:'solid',
-        borderColor:'#3089dc',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '100rem',
+        width: '80rem',
+        height: '80rem',
+        backgroundColor:'#3089dc',
+        borderRadius: '40rem',
     },
@@ -135,0 +121,0 @@ pic:{

HISTORY.md

 # Changelog 
 
 
+## 0.1.10 / 2017-07-31 
+
+  * [[2ec71ef](http://gitlab.alibaba-inc.com/nuke/transition/commit/2ec71ef4aafae7fee56c246e9f1ad068a46872ea)] - `fix` 添加needLayout api，添加 面板类型的demo,文档添加单位说明 
+
 ## 0.1.9 / 2017-06-21 
@@ -5,0 +9,0 @@

lib/index.js

@@ -7,3 +7,2 @@ /** @jsx createElement */
  *
- * @providesModule rx-transition
  * usage:
@@ -28,5 +27,5 @@ * Transition(box, {translate(150,150)}, {
 
-var _universalTransition = require('universal-transition');
+var _tran = require('./tran');
 
-var _universalTransition2 = _interopRequireDefault(_universalTransition);
+var _tran2 = _interopRequireDefault(_tran);
 
@@ -77,5 +76,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 		}
-		(0, _universalTransition2.default)(node, styles, options, callback);
+		(0, _tran2.default)(node, styles, options, callback);
 	} else {
-		(0, _universalTransition2.default)(node, styles, options, callback);
+		(0, _tran2.default)(node, styles, options, callback);
 	}
@@ -82,0 +81,0 @@ }

package.json

 {
   "name": "nuke-transition",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "渐变",
@@ -33,10 +33,12 @@ "main": "lib/index",
   "dependencies": {
-    "nuke-env": "^0.x.x",
-    "universal-transition": "^0.3.7"
+    "nuke-env": "^0.x.x"
   },
   "devDependencies": {
-    "nuke-view": "^0.x.x",
+    "nuke-button": "^0.x.x",
+    "nuke-page": "^0.x.x",
+    "nuke-dimensions": "^0.x.x",
+    "nuke-image": "^0.x.x",
+    "nuke-scroll-view": "^0.x.x",
     "nuke-text": "^0.x.x",
-    "nuke-image": "^0.x.x",
-    "nuke-button": "^0.x.x"
+    "nuke-view": "^0.x.x"
   },
@@ -43,0 +45,0 @@ "publishConfig": {

README.md

@@ -11,5 +11,8 @@ # Transition
 
-### transition(domNode, styles, options, callback)
+### Transition(domNode, styles, options, callback)
 - domNode: 可以通过 `findDOMNode(this.refs.box)` 找到。
-- styles:object,例如 `{transform: 'rotate(720deg)'}`
+- styles:object,例如 `{transform: 'rotate(720deg)'} ` `{transform: 'translate(150,150)'}`
+
+**注意：translate(150,150) 中，150 的单位是rem，组件将自动在 h5 下转换为对应的 px 值并加上 px 单位**
+
 - options: 动画参数：
@@ -16,0 +19,0 @@ ````json

theme/index.jsx

@@ -9,2 +9,3 @@ /** @jsx createElement */
 import Button from 'nuke-button';
+import ScrollView from 'nuke-scroll-view';
 
@@ -21,2 +22,3 @@
             opacity:true,
+            height:false,
             showOverlay:false
@@ -30,3 +32,3 @@ }
             delay: 0,
-            duration: 500
+            duration: 500,
         }, function() {
@@ -78,6 +80,19 @@ cb && cb.call(this);
     }
+    height=()=>{
+        let styles = this.state.height ? { height: '40rem'} : { height: '500rem'}
+        const box = findDOMNode(this.refs.height);
+        Transition(box, styles, {
+            timingFunction: 'linear',
+            delay: 0,
+            duration: 500,
+            needLayout:true,
+        }, ()=>{
+            this.setState({height : !this.state.height})
+        });
+        
+    }
        
     render() {
         return (
-            <View>
+            <ScrollView>
                 <View style={styles.st}><Text style={styles.stText}>基础用法</Text></View>
@@ -95,5 +110,5 @@ <View style={styles.wrapper}>
                 </Button.Group>
-                <Button style={{marginTop:'20rem'}} type="primary" onPress={this.overlay.bind(this)}>展示/关闭浮层</Button>
-                <View ref="overlay" style={[styles.overlay]}><Text>浮层内容区</Text></View>
-            </View>
+                <Button style={{marginTop:'20rem',marginBottom:'20rem'}} type="primary" onPress={this.height.bind(this)}>高度变化</Button>
+                <View ref="height" style={[styles.height]}><Text>内容区</Text></View>
+            </ScrollView>
 
@@ -145,8 +160,5 @@ );
     },
-    overlay:{
+    height:{
         width:'750rem',
-        position:'absolute',
-        left:0,
-        opacity:0,
-        height:400,
+        height:40,
         alignItems: 'center',
@@ -156,3 +168,2 @@ justifyContent: 'center',
         backgroundColor:'#dddddd',
-        bottom:'-400rem',
         
@@ -159,0 +170,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18386

increased by30.9%

Dependency count

1

decreased by-50%

Number of package files

8

increased by33.33%

Lines of code

277

increased by27.65%

Number of lines in readme file

26

increased by13.04%

Worsened metrics

Dev dependency count

7

increased by75%

Dependency changes

• - Removeduniversal-transition@^0.3.7

• - Removeduniversal-env@0.3.8(transitive)

• - Removeduniversal-transition@0.3.8(transitive)