【问题标题】:Create sliding left effect using Vuejs animation使用 Vuejs 动画创建向左滑动效果
【发布时间】:2017-08-09 12:25:08
【问题描述】:

我已经阅读了this official 关于 Vuejs 动画的文档。但是使用它的 css 钩子,我只能使元素随着淡入淡出和不同的持续时间出现/消失。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

如何使用Vuejs Animation制作滑动效果?就像here 一样。可能吗?请提供一些示例代码。

【问题讨论】:

    标签: vue.js


    【解决方案1】:

    你完全可以用 VueJS 做到这一点。 看看下面的例子。您可以看到两个示例,一个是您的案例采用的代码(使其滑动)。另一个是一个简单的图像滑块,它以 3 秒的间隔循环遍历图像数组。

    这里要注意的重要一点是,我们将图像元素包装在 for 循环中以强制该元素被销毁,因为否则您的元素将不会从 DOM 中删除并且不会转换(虚拟 DOM)。

    为了更好地理解 VueJS 中的转换,建议您查看getting started guide - transition section

    new Vue({
      el: '#demo',
      data: {
        message: 'Click for slide',
        show: true,
        imgList: [
            'http://via.placeholder.com/350x150',
          'http://via.placeholder.com/350x151',
          'http://via.placeholder.com/350x152'
        ],
        currentImg: 0
      },
      mounted() {
        setInterval(() => {
            this.currentImg = this.currentImg + 1;
        }, 3000);
      }
    })
    #demo {
      overflow: hidden;
    }
    
    .slide-leave-active,
    .slide-enter-active {
      transition: 1s;
    }
    .slide-enter {
      transform: translate(100%, 0);
    }
    .slide-leave-to {
      transform: translate(-100%, 0);
    }
    
    .img-slider{
      overflow: hidden;
      position: relative;
      height: 200px;
      width: 400px;
    }
    
    .img-slider img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right:0;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>VueJS 2.0 - image slider</title>
        <link rel="stylesheet" href="style.css">
      </head>
    
      <body>
        <div id="demo">
          <button v-on:click="show = !show">
            Toggle
          </button>
          <transition name="slide">
            <p v-if="show">{{message}}</p>
          </transition>
          <h3>
            Img slider
          </h3>
          <transition-group tag="div" class="img-slider" name="slide">
          <div v-for="number in [currentImg]" v-bind:key="number" >
            <img :src="imgList[Math.abs(currentImg) % imgList.length]"/>
          </div>
          </transition-group>
         </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script src="script.js"></script>
      </body>
    
    </html>

    【讨论】:

    • 嘿,这里有很好的例子,谢谢!有一个问题,这只向一个方向滑动,我如何允许例如两个箭头一左一右将图像向右或向左滑动???
    • @sicky 我目前遇到了一个类似的问题,我的 Vue 转换没有触发,但是,我的数据似乎是被动的。如果您能看一下并分享您对我哪里出错的想法,那就太好了stackoverflow.com/questions/51022673/…
    • 我和@Benny 在一起我们如何滑到另一边?
    • 我开始使用 vue-slick 而不是摆弄 vue-js 动画来做一个简单的滑动效果,它还支持许多其他的滑动效果。 kenwheeler.github.io/slick
    • @Benny 我想你可以使用像this.currentImg = this.currentImg + 1作为左键和this.currentImg = this.currentImg - 1作为下一个按钮的方法
    【解决方案2】:

    感谢上面的回答,对我帮助很大! 由于原始示例具有可双向滑动的按钮, 我通过添加“下一个”和“上一个”按钮对其进行了一些改进。当按下“上一个”时,我交换动画以使其反向:

    new Vue({
      el: '#demo',
      data: {
        back: false,
        currentIndex: 0
      },
      methods: {
        next(){
          this.back = false;
          this.currentIndex++;
        },
        prev(){
          this.back = true;
          this.currentIndex--;
        }
      },
    })
    #demo {
      overflow: hidden;
    }
    
    .slide-leave-active,
    .slide-enter-active {
      transition: 1s;
    }
    .slide-enter {
      transform: translate(100%, 0);
    }
    .slide-leave-to {
      transform: translate(-100%, 0);
    }
    
    .slideback-leave-active,
    .slideback-enter-active {
      transition: 1s;
    }
    .slideback-enter {
      transform: translate(-100%, 0);
    }
    .slideback-leave-to {
      transform: translate(100%, 0);
    }
    
    .div-slider{
      overflow: hidden;
      position: relative;
      height: 100px;
      width: 90%;
    }
    
    .div-slider .card {
      position: absolute;
      height: 100px;
      width: 90%;
      background-color: #60adff;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>VueJS 2.0 - image slider</title>
        <link rel="stylesheet" href="style.css">
      </head>
    
      <body>
        <div id="demo">
          
          <h3>
            div slider
          </h3>
          <transition-group tag="div" class="div-slider" :name="back? 'slideback' : 'slide'">
           <div v-if="currentIndex === 0" key="1">
            <div class="card">
              DIV 1
            </div>
           </div>
           <div v-if="currentIndex === 1" key="2" >
            <div class="card">
              DIV 2
            </div>
           </div>
           <div v-if="currentIndex === 2" key="3" >
            <div class="card">
              DIV 1
            </div>
           </div>
          </transition-group>
          <button @click="prev()" >prev</button>
          <button @click="next()">next</button>
         </div>
         
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
      </body>
    
    </html>

    【讨论】:

    • 简单高效!
    猜你喜欢
    • 2013-04-19
    • 2017-04-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多