anime

assets/sass/default.sass

@@ -16,6 +16,10 @@ html, body
   background-color: var(--background-default)
   min-height: 100vh
 
+html::-webkit-scrollbar,
+body::-webkit-scrollbar
+  display: none
+
 button
   background: #cc1414
   color: #ffffff

components/Drawer.vue

@@ -0,0 +1,127 @@
+<template lang="pug">
+.drawwer-background(
+  :class="{ show: show, hidden: !show }",
+  @click="exit()",
+  @keyup.esc="exit()",
+  v-focus,
+  tabindex="0"
+)
+  .container.circumscription(
+    :class="{ show: show, hidden: !show }",
+    @click.stop
+  )
+    slot
+</template>
+
+<script>
+export default {
+  data: () => ({
+    show: true,
+  }),
+  mounted() {
+    this.stop();
+  },
+  methods: {
+    exit() {
+      this.show = false;
+      document.referrer === "" ? this.$router.push(".") : this.$router.go(-1);
+      this.move();
+    },
+    /***滑动限制***/
+    stop() {
+      var mo = function (e) {
+        e.preventDefault();
+      };
+      document.body.style.overflow = "hidden";
+      document.addEventListener("touchmove", mo, false); //禁止页面滑动
+    },
+    /***取消滑动限制***/
+    move() {
+      var mo = function (e) {
+        e.preventDefault();
+      };
+      document.body.style.overflow = ""; //出现滚动条
+      document.removeEventListener("touchmove", mo, false);
+    },
+  },
+  beforeDestroy() {
+    this.move();
+  },
+  directives: {
+    focus: {
+      inserted: function (el) {
+        el.focus();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.drawwer-background
+  outline: 0
+  position: fixed
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 9999
+  background: rgba(0, 0, 0, 0.8)
+.container
+  color: #333333
+  background: #ffffff
+  position: absolute
+  left: 0
+  top: 3rem
+  right: 0
+  bottom: 0
+  border-radius: 2rem 2rem 0 0
+  overflow: auto
+  scrollbar-width: none
+  -ms-overflow-style: none
+  //padding: 2rem 4rem
+  //max-width: 1280px
+  //margin: 0 auto
+
+.container::-webkit-scrollbar
+  display: none // Chrome Safari
+
+/* show element */
+.drawwer-background.show
+  animation: showbackground 0.75s
+
+.drawwer-background.hidden
+  animation: hiddenbackground 0.75s
+
+.container.show
+  animation: showcontainer 0.75s
+
+.container.hidden
+  animation: hiddencontainer 0.75s
+
+@keyframes showbackground
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+@keyframes hiddenbackground
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+@keyframes showcontainer
+  0%
+    opacity: 0
+    transform: translate(0, 64px)
+  100%
+    opacity: 1
+    transform: translate(0, 0)
+@keyframes hiddencontainer
+  0%
+    opacity: 1
+    transform: translate(0, 0)
+  100%
+    opacity: 0
+    transform: translate(0, 64px)
+</style>

layouts/default.vue

@@ -18,12 +18,6 @@
           NuxtLink.button(to="/account/create") Login
       .websocket(:class="{ on: websocket }")
   Nuxt
-  footer.footer
-    p
-      b Kana
-    .github
-      a(href="https://github.com/InvisibleFuture/kana")
-        span.fab.fa-github
 </template>
 
 <script>

nuxt.config.js

@@ -1,5 +1,6 @@
 export default {
   components: true,
+  buildModules: ['nuxt-animejs'],
   modules: ['@nuxtjs/axios', '@nuxtjs/proxy'],
   axios: { proxy: true, proxyHeaders: true },
   proxy: [
@@ -18,5 +19,33 @@ export default {
       }
     }]
   ],
-  css: ['@fortawesome/fontawesome-free/css/all.css']
+  css: ['@fortawesome/fontawesome-free/css/all.css'],
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in',
+    css: false,
+    beforeEnter(el) {
+      this.$anime.set(el, {
+        opacity: 0
+      })
+    },
+    enter(el, done) {
+      this.$anime({
+        targets: el,
+        opacity: [0, 1],
+        duration: 500,
+        easing: 'easeInOutSine',
+        complete: done
+      })
+    },
+    leave(el, done) {
+      this.$anime({
+        targets: el,
+        opacity: [1, 0],
+        duration: 500,
+        easing: 'easeInOutSine',
+        complete: done
+      })
+    }
+  }
 }

package.json

@@ -24,7 +24,8 @@
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.49.0",
-    "sass-loader": "^10.1.1"
+    "sass-loader": "^10.1.1",
+    "nuxt-animejs": "^1.2.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",

pages/index.vue

@@ -10,34 +10,17 @@
         li 除去阅览以外, 还可以做一些什么
         li 如翻页, 如发表
         li
-          nuxt-link(to="/thread/create")
+          NuxtLink(to="/thread/create")
             button 新议题
-  //.index.main-width
+  //NuxtLink(to="/index") NASAS
-  //  article
+  //NuxtLink(to="/index/hCG7UKzSRgCzyd8Y") |NASAS
-  //    .card
+  //Nuxt
-  //      .content
+  footer.footer
-  //        p 下载 Kana: 400 行代码实现服务端
+    p
-  //        p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
+      b Kana
-  //        p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
+    .github
-  //        //ModelBox
+      a(href="https://github.com/InvisibleFuture/kana")
-  //        //ModelConesInner
+        span.fab.fa-github
-  //    .card
-  //      .header
-  //        span 最新
-  //        span 精华
-  //        .expnone
-  //        nuxt-link.create-thread(to="/thread/create") 新议题
-  //      .content
-  //        ThreadList(:data="data")
-  //  aside
-  //    .card
-  //      .content
-  //        .bbs-title Kana 开发者论坛
-  //        p
-  //        | 基于 node 实现的小型服务端,旨在快速灵活构建小型项目
-  //        | <br/> 1. 数据类型无限扩展并复用
-  //        | <br/> 2. 无依赖免配置一键安装
-  //        | <br/> 3. 接口模型
 </template>
 
 <script>

pages/thread.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+Nuxt
+</template>

pages/thread/_id.vue

@@ -1,4 +1,5 @@
 <template lang="pug">
+Drawer
   .thread
     .header
       h1.title {{ thread.title }}
@@ -13,7 +14,6 @@
       .thread-main(v-html="markdown(thread.data)")
       button.magic
         i.fas.fa-magic
-
       //button.editor(
       //  v-if="account.online && (account.uid === thread.uid || account.gid === 1)",
       //  @click="edit_mode = !edit_mode"

yarn.lock

@@ -1701,6 +1701,11 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+animejs@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
+  integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
+
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -5261,6 +5266,13 @@ num2fraction@^1.2.2:
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
   integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
+nuxt-animejs@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/nuxt-animejs/-/nuxt-animejs-1.2.2.tgz#a542222a0bd4c45d5b3d0d614a87883a2fd70b8a"
+  integrity sha512-umDCwIQV8N7IsZqlKmOJYGaoiWAZkw/GPun9a494vS9wMCZ6/3vkD8b5qg5E/OvsbQyypfKG+DtGksGvqrYLYQ==
+  dependencies:
+    animejs "^3.2.1"
+
 nuxt@2.15.8:
   version "2.15.8"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-2.15.8.tgz#946cba46bdaaf0e3918aa27fd9ea0fed8ed303b0"