Tạo hiệu ứng trượt bên trái bằng cách sử dụng hiệu ứng Vuejs

Tôi đã đọc tài liệu this official về hoạt ảnh Vuejs. Nhưng sử dụng nó css móc, tôi chỉ có thể làm cho yếu tố xuất hiện/biến mất với phai và thời gian khác nhau.Tạo hiệu ứng trượt bên trái bằng cách sử dụng hiệu ứng 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 
}

Cách sử dụng Vuejs Animation để tạo hiệu ứng trượt? Giống như một trong số here. Có thể không? Vui lòng cung cấp một số mã mẫu.

Nguồn

2017-03-17 Nicolas S.Xu

Bạn hoàn toàn có thể làm điều này với VueJS. Hãy xem ví dụ dưới. Bạn có thể thấy hai ví dụ, một là mã được chấp nhận cho trường hợp của bạn (để làm cho nó trượt). Và khác là một thanh trượt hình ảnh đơn giản, mà vòng qua mảng hình ảnh trong khoảng thời gian 3 giây.

Điều quan trọng cần lưu ý ở đây là chúng tôi quấn phần tử hình ảnh vào vòng lặp để buộc phần tử bị hủy, vì nếu không các phần tử của bạn sẽ không bị xóa khỏi DOM và sẽ không chuyển tiếp (DOM ảo).

Để hiểu rõ hơn về quá trình chuyển đổi trong VueJS trong đề xuất bạn hãy xem 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>

Nguồn

2017-03-20 10:45:55 Sicky

Hey, ví dụ tuyệt vời ở đây, nhờ cho điều này! Có một câu hỏi, điều này chỉ trượt theo một hướng, làm thế nào để tôi cho phép ví dụ hai mũi tên một trái và một bên phải trượt hình ảnh sang phải hoặc trái ??? – Benny

Tạo hiệu ứng trượt bên trái bằng cách sử dụng hiệu ứng Vuejs

Trả lời

Các vấn đề liên quan