Skip to content

N
node-sample
Commit 5a123910 authored by Evan You's avatar Evan You
Browse files
Options

tweak transition logic

parent 0f936915
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 27 deletions
build/webpack.server.config.js
View file @ 5a123910
......@@ -9,10 +9,7 @@ module.exports = Object.assign({}, base, {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
}),
externals: {
firebase: true,
'lru-cache': true
},
externals: ['firebase', 'lru-cache', 'es6-promise'],
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
......
index.html deleted 100644 → 0
View file @ 0f936915
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-hackernews-2.0</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
server.js
View file @ 5a123910
......@@ -67,6 +67,7 @@ app.get('*', (req, res) => {
<head>
<meta charset="utf-8">
<title>vue-hackernews-2.0</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
${process.env.NODE_ENV === 'production'
? `<link rel="stylesheet" href="/dist/styles.css">`
: ``}
......
src/store/index.js
View file @ 5a123910
......@@ -53,6 +53,7 @@ const store = new Vuex.Store({
if (inBrowser) {
watchTopIds(ids => {
store.commit('RECEIVE_TOP_IDS', { ids })
store.dispatch('FETCH_NEWS')
})
}
......
src/views/News.vue
View file @ 5a123910
......@@ -12,9 +12,9 @@
</li>
</ul>
<transition :name="transition">
<div class="news-list" v-if="!loading" :key="$route.params.page">
<div class="news-list" :key="displayPage">
<transition-group tag="ul" name="item">
<news-item v-for="item in news" :key="item.id" :item="item">
<news-item v-for="item in displayItems" :key="item.id" :item="item">
</news-item>
</transition-group>
</div>
......@@ -41,13 +41,13 @@ export default {
},
data () {
return {
loading: false,
displayPage: this.$route.params.page,
displayItems: this.$store.getters.news,
transition: 'slide-left'
}
},
computed: {
news () {
return this.$store.getters.news
},
page () {
return Number(this.$route.params.page)
},
......@@ -57,9 +57,6 @@ export default {
},
hasMore () {
return this.page < this.maxPage
},
loading () {
return this.news.length < this.$store.state.storiesPerPage
}
},
mounted () {
......@@ -70,10 +67,15 @@ export default {
},
watch: {
'$route' (to, from) {
this.$store.dispatch(`FETCH_NEWS`)
this.transition = Number(to.params.page) > Number(from.params.page)
? 'slide-left'
: 'slide-right'
this.loading = true
this.$store.dispatch(`FETCH_NEWS`).then(() => {
const toPage = Number(to.params.page)
const fromPage = Number(from.params.page)
this.transition = toPage > fromPage ? 'slide-left' : 'slide-right'
this.displayPage = toPage
this.displayItems = this.$store.getters.news.slice()
this.loading = false
})
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment