javascript 幻灯片过渡

Posted 2021-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 幻灯片过渡相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
  </head>
  <body>
    <main id="app">
      <transition :name="transitionName">
        <router-view></router-view>
      </transition>
    </main>
  </body>
</html>

//
// slide-left
//
.slide-left-enter-active, .slide-left-leave-active
  position: absolute
  transition: transform 1s

.slide-left-leave
  transform: none

.slide-left-leave-to
  transform: translateX(-100%)

.slide-left-enter
  transform: translateX(100%)

.slide-left-enter-to
  transform: none

//
// slide-right
//
.slide-right-enter-active, .slide-right-leave-active
  position: absolute
  transition: transform 1s

.slide-right-leave
  transform: none

.slide-right-leave-to
  transform: translateX(100%)

.slide-right-enter
  transform: translateX(-100%)

.slide-right-enter-to
  transform: none

new Vue({
  el: '#app',
  router: router,
  data: {
    transitionName: null
  },
  watch: {
    '$route': function(from, to) {
      var fromIndex, toIndex;
      toIndex = _.findIndex(routes, { name: to.name });
      fromIndex = _.findIndex(routes, { name: from.name });
      return this.transitionName = toIndex < fromIndex ? 'slide-left' : 'slide-right';
    }
  }
});

以上是关于javascript 幻灯片过渡的主要内容，如果未能解决你的问题，请参考以下文章

即将溢出幻灯片过渡计数？

UIView 幻灯片过渡，需要帮助和接近工作的代码