创建使用滑动动画Vuejs

左效果我读过this official文件约Vuejs动画。但使用它的CSS钩子，我只能使元素出现/消失与淡入淡出和不同的持续时间。创建使用滑动动画Vuejs

<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。可能吗？请提供一些示例代码。

来源

2017-03-17 Nicolas S.Xu

您可以绝对与VueJS做到这一点。看看下面的例子。您可以看到两个示例，一个是您的案例的采用代码（使其滑动）。另一个是简单的图像滑块，它以3秒为间隔循环显示图像阵列。

这里要注意的重要的事情，是我们封装图像元素的for循环，迫使元素被破坏，否则你的元素不会从DOM移除，并不会转换（虚拟DOM）。

对于在VueJS更好地理解过渡的建议你检查出getting started guide - transition section。

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    message: 'Click for slide', 
 
    show: true, 
 
    imgList: [ 
 
    \t 'http://via.placeholder.com/350x150', 
 
     'http://via.placeholder.com/350x151', 
 
     'http://via.placeholder.com/350x152' 
 
    ], 
 
    currentImg: 0 
 
    }, 
 
    mounted() { 
 
    \t setInterval(() => { 
 
    \t 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>

来源

2017-03-20 10:45:55 Sicky

嘿，很好的例子，在这里，感谢这个！有一个问题，这只能向一个方向滑动，我如何允许例如左右两个箭头将图像滑动到右侧或左侧？ – Benny

创建使用滑动动画Vuejs

回答

相关问题