vue.js - modal - vuetify
Crea un efecto deslizante a la izquierda con la animación de Vuejs (1)
He leído este documento oficial sobre la animación de Vuejs. Pero usando sus ganchos css, solo puedo hacer que el elemento aparezca / desaparezca con fade y duración diferente.
<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
}
¿Cómo usar Vuejs Animation para crear un efecto deslizante? Como el de aquí . ¿Es posible? Por favor proporcione un código de muestra.
Usted puede hacer esto con VueJS. Eche un vistazo al ejemplo debajo. Puede ver dos ejemplos, uno es el código adoptado para su caso (para hacer que se deslice). Y el otro es un deslizador de imagen simple, que recorre una matriz de imágenes en intervalos de 3 segundos.
Lo importante a tener en cuenta aquí, es que envolvemos el elemento de imagen en for loop para forzar la destrucción del elemento, ya que de lo contrario sus elementos no se eliminarán de DOM y no pasarán (DOM virtual).
Para una mejor comprensión de las transiciones en VueJS, le recomendamos que consulte la guía de introducción - sección de transición .
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>