我已经阅读了有关Vuejs动画的
this official文档.但是使用它的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做到这一点.
看看下面的例子.您可以看到两个示例,一个是您的案例采用的代码(使其滑动).另一个是简单的图像滑块,它以3秒的间隔循环通过图像阵列.
看看下面的例子.您可以看到两个示例,一个是您的案例采用的代码(使其滑动).另一个是简单的图像滑块,它以3秒的间隔循环通过图像阵列.
这里要注意的重要一点是,我们将image元素包装在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>
