liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

给书签页面加个动画

This commit is contained in:
luchenqun 2017-03-01 21:54:48 +08:00
parent bfd4678c9b
commit 18e11c34c8
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/scripts/controllers/bookmarks-controller.js
View File

@ -180,10 +180,33 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
login: true,
index: 0
});
transition();
})
.catch((err) => console.log('getBookmarks err', err));
}
function transition() {
setTimeout(function() {
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-navigate';
if ($scope.showStyle == 'card') {
className = 'js-segment-card'
} else if ($scope.showStyle == 'table') {
className = 'js-table-bookmarks'
}
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}, 10)
}
// TODO: 我要将编辑按钮固定在容器的右上角
$(window).resize(updateEditPos);
updateEditPos();

12
public/views/bookmarks.html
View File

@ -30,7 +30,13 @@
id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark)">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
<img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:default;" ng-click="detailBookmark(bookmark);$event.stopPropagation()" ng-if="!edit" favicon-err="./images/favicon/{{bookmark.id}}.ico">
<img
class="ui ui middle aligned tiny image"
ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico"
style="width:16px;height:16px;cursor:default;"
ng-click="detailBookmark(bookmark);$event.stopPropagation()"
ng-if="!edit"
favicon-err="./images/favicon/{{bookmark.id}}.ico">
<span>{{ bookmark.title}}</span>
</div>
</div>
@ -41,7 +47,7 @@
<div class="ui divider"></div>
</div>
</div>
<table class="ui celled table" ng-if="showStyle === 'table'">
<table class="ui celled table js-table-bookmarks" ng-if="showStyle === 'table'">
<thead>
<tr>
<th>标题</th>
@ -87,7 +93,7 @@
</tr>
</tfoot>
</table>
<div class="ui segment" ng-if="showStyle === 'card'">
<div class="ui segment js-segment-card" ng-if="showStyle === 'card'">
<div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks">
<div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">