使用Vuejs动画创建向左滑动效果

使用Vuejs动画创建向左滑动效果

关注
发信
关注(28)粉丝(399)

使用Vuejs动画创建向左滑动效果

本文介绍了使用Vuejs动画创建向左滑动效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经阅读了关于 Vuejs 动画的这份官方文档.但是使用它 css hooks，我只能让元素随着淡入淡出和不同的持续时间出现/消失.

<button v-on:click="show = !show">切换<transition name="淡入淡出"><p v-if="show">你好</p>
.fade-enter-active, .fade-leave-active {过渡:不透明度 0.5s}.fade-enter, .fade-leave-to/* .fade-leave-active in

如何使用Vuejs Animation制作滑动效果?就像这里.是否可以?请提供一些示例代码.

解决方案

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

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

为了更好地理解 VueJS 中的转换，建议您查看 入门指南- 过渡部分.

new Vue({el: '#demo',数据: {message: '点击幻灯片',显示:真实，图像列表:['http://via.placeholder.com/350x150','http://via.placeholder.com/350x151','http://via.placeholder.com/350x152'],当前图像:0},安装(){setInterval(() => {this.currentImg = this.currentImg + 1;}, 3000);}})
#demo {溢出:隐藏；}.slide-leave-active,.slide-enter-active {过渡:1s；}.slide-enter {变换:翻译(100%，0)；}.slide-leave-to {变换:翻译(-100%，0)；}.img-滑块{溢出:隐藏；位置:相对；高度:200px；宽度:400px；}.img-slider img {位置:绝对；顶部:0；左:0；底部:0；右:0;}
<头><title>VueJS 2.0 - 图像滑块</title><link rel="stylesheet" href="style.css"><身体><div id="演示"><button v-on:click="show = !show">切换<transition name="slide"><p v-if="show">{{message}}</p><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]"/>

</transition-group>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="script.js"></script></html>

I've read this official document about Vuejs animation. But using it css hooks, I can only make element appear/disappear with fade and different duration. 

<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
}

How to use Vuejs Animation to create a sliding effect? Like the one here. Is it possible? Please provide some sample code.

解决方案

You can absolutely do this with VueJS.Have a look at the example under. You can see two examples, one is the adopted code for your case(to make it slide). And other is a simple image slider, that loops through array of images in 3 seconds interval.

Important thing to note here, is that we wrap the image element in for loop to force the element to be destroyed, because otherwise your elements will not be removed from DOM and will not transition (virtual DOM).

For better understanding of transitions in VueJS in recommend you to check out 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>

这篇关于使用Vuejs动画创建向左滑动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-14 02:45
Powered by LMLPHP ©2024 使用Vuejs动画创建向左滑动效果 0.032916