给所有页面加上了高大上的动画

public/scripts/controllers/advice-controller.js

@@ -35,6 +35,9 @@ app.controller('adviceCtr', ['$scope', '$state', '$timeout', 'bookmarkService',
     function getAdvices(params) {
         bookmarkService.getAdvices(params)
             .then((data) => {
+                if ($scope.advices.length == 0) {
+                    transition();
+                }
                 $scope.advices = data;
                 pubSubService.publish('Common.menuActive', {
                     login: true,
@@ -52,4 +55,21 @@ app.controller('adviceCtr', ['$scope', '$state', '$timeout', 'bookmarkService',
         getAdvices({});
     }, 100)
 
+    $('.js-segment-advice').transition('hide');
+
+    function transition() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        var className = 'js-segment-advice';
+        $('.' + className).transition('hide');
+        $('.' + className).transition({
+            animation: t,
+            duration: 500,
+        });
+    }
+
 }]);

public/scripts/controllers/bookmarks-controller.js

@@ -106,7 +106,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     }
 
     $scope.copy = function(id, url) {
-        var clipboard = new Clipboard('#url'+id, {
+        var clipboard = new Clipboard('#url' + id, {
             text: function() {
                 return url;
             }
@@ -141,8 +141,14 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     }
 
     $scope.closeMsg = function() {
+        $('.js-msg').transition({
+            animation: animation(),
+            duration: '500ms',
+            onComplete: function() {
                 $(".js-msg").remove();
             }
+        });
+    }
 
     $scope.loadCardData = function() {
         console.log('loadCardData.........')
@@ -198,6 +204,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
                     login: true,
                     index: 0
                 });
+
                 transition();
             })
             .catch((err) => console.log('getBookmarks err', err));
@@ -205,6 +212,9 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
 
 
     function transition() {
+        if ($scope.showStyle == 'card' && $scope.currentPage > 1) {
+            return;
+        }
         var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
             'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
             'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
@@ -223,6 +233,18 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
             duration: 500,
         });
     }
+
+    function animation() {
+
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        return t;
+    }
+
     // TODO: 我要将编辑按钮固定在容器的右上角
     $(window).resize(updateEditPos);
     updateEditPos();

public/scripts/controllers/home-controller.js

@@ -16,9 +16,25 @@ app.controller('homeCtr', ['$scope', '$stateParams', '$filter', '$state', '$wind
                     login: false,
                     index: 0
                 });
+                transition();
             }
         })
         .catch((err) => {
             console.log('autoLogin err', err)
         });
+
+        function transition() {
+            var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+                'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+                'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+            ];
+            var t = data[parseInt(Math.random() * 1000) % data.length];
+
+            var className = 'js-segment-home';
+            $('.' + className).transition('hide');
+            $('.' + className).transition({
+                animation: t,
+                duration: 500,
+            });
+        }
 }]);

public/scripts/controllers/login-controller.js

@@ -16,14 +16,6 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
     $scope.passwordRegister1 = "";
     $scope.passwordRegister2 = "";
 
-
-    $scope.myKeyup = function(e) {
-        var keycode = window.event ? e.keyCode : e.which;
-        if (keycode == 13) {
-            $scope.login();
-        }
-    };
-
     $scope.login = function() {
         var autoLogin = $('.ui.checkbox.js-auto-login').checkbox('is checked');
         if (!$scope.username || !$scope.password) {
@@ -62,7 +54,7 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
     $scope.showRegister = function() {
         $('.ui.modal.js-register').modal({
             closable: false,
-        }).modal('show');
+        }).modal('setting', 'transition', transition()).modal('show');
 
         $scope.emailRegister = "";
         $scope.usernameRegister = "";
@@ -113,4 +105,19 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
                 toastr.error('注册失败：' + JSON.stringify(err), "错误");
             });
     }
+
+    var className = 'js-form-login';
+    $('.' + className).transition('hide');
+    $('.' + className).transition({
+        animation: transition(),
+        duration: 500,
+    });
+
+    function transition() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        return data[parseInt(Math.random() * 1000) % data.length];
+    }
 }]);

public/scripts/controllers/search-controller.js

@@ -199,10 +199,27 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
                 $scope.bookmarkCount = data.totalItems;
                 $scope.totalPages = Math.ceil($scope.bookmarkCount / perPageItems);
                 $scope.loading = false;
+                transition();
             })
             .catch((err) => {
                 console.log('getBookmarks err', err);
                 $scope.loading = false;
             });
     }
+
+    function transition() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        var className = 'js-table-search';
+        $('.' + className).transition('hide');
+        $('.' + className).transition({
+            animation: t,
+            duration: 500,
+        });
+    }
+
 }]);

public/scripts/controllers/settings-controller.js

@@ -76,4 +76,21 @@ app.controller('settingsCtr', ['$scope', '$stateParams', '$filter', '$state', '$
         login: true,
         index: 3
     });
+    transition();
+    
+    function transition() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        var className = 'js-segment-settings';
+        $('.' + className).transition('hide');
+        $('.' + className).transition({
+            animation: t,
+            duration: 500,
+        });
+    }
+
 }]);

public/scripts/controllers/tags-controller.js

@@ -15,7 +15,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     $scope.currentPage = 1;
     $scope.inputPage = '';
     $scope.currentTagId = ($stateParams && $stateParams.tagId) || '';
-    $scope.edit = false;
+    $scope.editMode = false;
     $scope.newTag = '';
     $scope.waitDelTag = {};
     $scope.waitDelBookmark = {};
@@ -57,6 +57,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
                     login: true,
                     index: 1
                 });
+                transition();
             })
             .catch((err) => {
                 console.log('getTags err', err);
@@ -74,7 +75,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     }
 
     $scope.jumpToUrl = function(url, id) {
-        if (!$scope.edit) {
+        if (!$scope.editMode) {
             $window.open(url, '_blank');
             bookmarkService.clickBookmark({
                 id: id
@@ -127,7 +128,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     }
 
     $scope.copy = function(id, url) {
-        var clipboard = new Clipboard('#tagurl'+id, {
+        var clipboard = new Clipboard('#tagurl' + id, {
             text: function() {
                 return url;
             }
@@ -145,11 +146,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
     }
 
     $scope.toggleMode = function() {
-        $scope.edit = !$scope.edit;
+        $scope.editMode = !$scope.editMode;
-        if (!$scope.edit) {
+        if (!$scope.editMode) {
             getTags({});
+        } else {
+            $('.js-tags-table').transition('hide');
         }
-        setTimeout(updateEditPos, 100);
+        updateEditPos();
     }
 
     $scope.editTag = function(tag) {
@@ -323,7 +326,9 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
                 }
 
                 if ($scope.currentTagId) {
+                    if (!$scope.editMode) {
                         $scope.getBookmarks($scope.currentTagId, $scope.currentPage);
+                    }
                 } else {
                     toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示");
                 }
@@ -381,4 +386,18 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
         }
     }
 
+    function transition() {
+        var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip',
+            'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up',
+            'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right'
+        ];
+        var t = data[parseInt(Math.random() * 1000) % data.length];
+
+        var className = 'js-tags-table';
+        $('.' + className).transition('hide');
+        $('.' + className).transition({
+            animation: t,
+            duration: 500,
+        });
+    }
 }]);

public/views/advice.html

@@ -1,4 +1,4 @@
-<div class="ui segment">
+<div class="ui segment js-segment-advice">
     <div class="ui form">
         <div class="required field">
             <label>留言分类</label>

public/views/home.html

@@ -1,4 +1,4 @@
-<div class="ui segment">
+<div class="ui segment js-segment-home">
     <div class="ui container">
         <h2 class="ui dividing header">为什么要做个网络书签</h2>
         <p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是这个书签有以下几个缺点我没法忍受（由于浏览器我只用Google Chrome，下面的观点我都是基于该浏览器）：</p>

public/views/login.html

@@ -1,4 +1,4 @@
-<form class="ui form segment" ng-class={error:showErr}>
+<form class="ui form segment js-form-login" ng-class={error:showErr}>
     <div class="ui error message">
         <div class="header">错误提示</div>
         <p>
@@ -7,14 +7,14 @@
     <div class="required field">
         <label>用户名</label>
         <div class="ui icon input">
-            <input type="text" ng-model="username" ng-keyup="myKeyup($event)">
+            <input type="text" ng-model="username" ng-keypress="($event.which === 13)?login():0">
             <i class="user icon"></i>
         </div>
     </div>
     <div class="required field">
         <label>密码</label>
         <div class="ui icon input">
-            <input type="password" ng-model="password" ng-keyup="myKeyup($event)">
+            <input type="password" ng-model="password" ng-keypress="($event.which === 13)?login():0">
             <i class="lock icon"></i>
         </div>
     </div>
@@ -32,6 +32,7 @@
         </span>
     </div>
 </form>
+
 <div class="ui modal js-register">
     <div class="header">
         账号注册

public/views/menus.html

@@ -45,6 +45,6 @@
         </div>
     </div>
     <div class="ui huge menu js-not-login-in" ng-if="!login">
-        <a class="item" ng-class="{selected:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
+        <a class="item" ng-class="{selected:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ui-sref-opts="{reload: true}" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
     </div>
 </div>

public/views/search.html

@@ -115,7 +115,7 @@
         </div>
     </div>
 </div>
-<table class="ui celled table" ng-show="!loading">
+<table class="ui celled table js-table-search" ng-show="!loading">
     <thead>
         <tr>
             <th>标题</th>

public/views/settings.html

@@ -1,4 +1,4 @@
-<div class="ui segment">
+<div class="ui segment js-segment-settings">
     <div class="ui grid">
         <div class="four wide stretched column">
             <div class="ui secondary vertical pointing menu">

public/views/tags.html

@@ -1,15 +1,14 @@
 <div class="ui segment js-tags">
-    <div class="ui container" ng-show="!edit">
+    <div class="ui container" ng-show="!editMode">
         <div class="ui grid">
             <div class="two wide column" ng-class="" ng-mouseover="" ng-mouseleave="" ng-repeat="tag in tags">
                 <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
-                    {{ tag.name }}
+                    {{ tag.name }} ({{ tag.cnt || 0 }})
-                    ({{ tag.cnt || 0 }})
                 </div>
             </div>
         </div>
     </div>
-    <div class="ui container" ng-show="edit" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
+    <div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
         <p>提示：拖拽分类即可进行排序</p>
         <div class="ui six stackable cards" sv-root sv-part="tags">
             <div class="card" ng-repeat="tag in tags" sv-element>
@@ -41,14 +40,14 @@
             </div>
         </div>
     </div>
-    <div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}">
+    <div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{editMode ? '退出编辑模式' : '点我进入编辑模式'}}">
-        <img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png" ng-show="!loadTags">
+        <img class="ui ui middle aligned tiny image" ng-src="./images/{{ editMode ? 'back' : 'edit'}}.png" ng-show="!loadTags">
     </div>
 </div>
 <div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
     正在加载中...
 </div>
-<table class="ui celled table" ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !edit">
+<table class="ui celled table js-tags-table"ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !editMode">
     <thead>
         <tr>
             <th>标题</th>