optimise image change

README.md

@@ -51,13 +51,6 @@ class App extends React.Component<any, any> {
 | images      | string[]     | []      | image source array | true  |
 | activeIndex | number       | 0       | active image index | false |
 
-## TODO
-
-- [ ] add button icon
-- [ ] add toolbar
-- [X] optimize image zoom
-- [ ] optimise image change
-
 ## License
 
 MIT

src/ViewerNav.tsx

@@ -17,9 +17,14 @@ export default class ViewerNav extends React.Component<ViewerNavProps, any> {
   }
 
   render() {
+    let marginLeft = (Math.ceil(this.props.images.length / 2) - this.props.activeIndex - 1) * 1.5 * 30;
+    let listStyle = {
+      marginLeft: `${marginLeft}px`,
+    };
+
     return (
       <div className={`${this.props.prefixCls}-navbar`}>
-        <ul className={`${this.props.prefixCls}-list`}>
+        <ul className={`${this.props.prefixCls}-list ${this.props.prefixCls}-transition`} style={listStyle}>
           {this.props.images.map((item, index) =>
             <li
             key={index}