<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
li {
display: flex;
align-items: center;
list-style-type: none;
margin: 20px 0;
}
img {
width: 150px;
height: 80px;
}
.add_cart {
border: 1px solid #f1ebeb;
background-color: #fff;
margin-left: 10px;
padding: 10px;
border-radius: 5px;
}
.cart {
position: fixed;
bottom: 0;
right: 0;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background: chartreuse;
}
span {
width: 150px;
height: 80px;
display: block;
position: absolute;
transition: all 1s linear;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in imgLists" :key="index" class="lis" ref="imgLists">
<img :src="item.src">
<button class="add_cart" @click="addCart(index)">加入购物车</button>
</li>
</ul>
<div class="cart" ref="cart">购物车</div>
<transition @enter="enter" @after-enter="after">
<span v-if="isShow"></span>
</transition>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
isShow: false,
imgLists: [{
id: 1,
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2021447237,3437058967&fm=26&gp=0.jpg'
}, {
id: 2,
src: 'https://cn.vuejs.org/images/logo.png'
}, {
id: 3,
src: 'https://cn.vuejs.org/images/dcloud1.png'
}],
currentIndex: -1,
isShow: false
}
},
methods: {
addCart(index) {
this.currentIndex = index
this.isShow = true
},
enter(el, done) {
let li = this.$refs.imgLists[this.currentIndex]
let { x, y } = li.getBoundingClientRect()
el.style.left = x + 'px'
el.style.top = y + 'px'
el.style.background = `url(${this.imgLists[this.currentIndex].src})`
el.style.backgroundSize = `100% 100%`
let { x: a, y: b } = this.$refs.cart.getBoundingClientRect()
el.style.transform = `translate3d(${a-x}px, ${b-y}px, 0) scale(0, 0)`
el.addEventListener('transitionend', done)
},
after() {
this.isShow = false
}
}
})
</script>
</body>
</html>
vue实现加入购物车动画效果--transition
最新推荐文章于 2024-08-28 15:31:04 发布