问题描述
我已经阅读了关于 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>