vue实现购物车飞入动画。
用的是vue+iview
<template>
<div>
<div style="width: 80%;margin: 20px auto 0">
<Row :gutter="20">
<Col span="24">
<Table :columns="columns" :data="tableData" ref="searchTable" border id="content">
<template slot-scope="{row}" slot="keyWord">
<span style="color: #00b38a">{
{
row.keyWord}}</span>
</template>
<template slot-scope="{row}" slot="searchIndex">
<span>{
{
row.searchIndex}}</span>
</template>
<template slot-scope="{row}" slot="searchResult">
<span>{
{
row.searchResult}}</span>
</template>
<template slot-scope="{row}" slot="searchFirstApply">
<span style="color: #00b38a">{
{
row.searchFirstApply}}</span>
</template>
<template slot-scope="{row}" slot="action">
<div style="cursor: pointer">
<Icon type="ios-cart-outline" size="40" style="color: rgb(255, 169, 93)"
@click="addToCart (row)"/>
</div>
</template>
</Table>
</Col>
</Row>
</div>
<!-- 底部购物车 -->
<Badge :count="count" type="success"
style="position: fixed;bottom: 150px;right: 100px" id="appCart">
<div style="cursor: pointer">
<Icon type="ios-cart-outline" size="40" style="color: rgb(255, 169, 93)"/>
</div>
</Badge>
<!-- 小球 -->
<transition appear
@before-appear="beforeEnter"
@enter="enter"
@after-appear='afterEnter'
v-for="(item,index) in showMoveDot"
:key="index.id">
<div class="move_dot"
ref="ball"
v-if="item" :style="{top:elTop+'px',left:elLeft+'px'}">
<img :src="imgUrl?imgUrl:'https://cdn.qimai.cn/aso100/201710/06b463b971efff3da8c99764f5933750.png'" alt="">
</div>
</transition>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
columns: [
{
title: '排名',
type: 'index',
width: 80,
align: 'center'
},
{
title: '关键词',
slot: 'keyWord',
key: 'keyWord',
align: 'center'
},
{
title: '搜索指数',
slot: 'searchIndex',
key: 'searchIndex',
align: 'center'
},
{
title: '搜索结果数',
slot: 'searchResult',
key: 'searchResult',
align: 'center'
},
{
title: '搜索结果排名第一的应用',
slot: 'searchFirstApply',
key: 'searchFirstApply',
align: 'center'
},
{
title: '操作',
slot: 'action',
key: 'action',
align: 'center'
}
],
tableData: [{
keyWord: '牛牛01',
searchIndex: 20,
searchResult: 40,
searchFirstApply: 'HIPPo 001',
imgUrl:'https://is5-ssl.mzstatic.com/image/thumb/Purple113/v4/8a/00/b0/8a00b02f-bf00-9a38-0382-0aadeb4c811e/source/100x100bb.jpg'
}, {
keyWord: '牛牛02',
searchIndex: 20,
searchResult: 40,
searchFirstApply: 'HIPPo 002',
imgUrl:'https://is3-ssl.mzstatic.com/image/thumb/Purple123/v4/8f/53/11/8f531133-4a64-043e-1b0e-51281b5476a2/source/100x100bb.jpg'
}],
count:0,
imgUrl:'',
showMoveDot: [], //控制下落的小圆点显示隐藏
elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
elTop: 0, //当前点击购物车按钮在网页中的绝对left值
}
},
methods: {
addToCart(row) {
this.showMoveDot = [...this.showMoveDot, true];
//显示图片
this.imgUrl = row.imgUrl;
this.elLeft = event.target.getBoundingClientRect().left;
this.elTop = event.target.getBoundingClientRect().top;
},
beforeEnter(el) {
// 设置transform值
el.style.opacity = 0;
el.style.transform = 'translate(0, 0)'
},
enter(el, done) {
el.offsetWidth;
// 获取徽标在页面中的位置
let badgePosition = document.getElementById('appCart').getBoundingClientRect();
const xDist = badgePosition.left - this.elLeft + 10;
const yDist = badgePosition.top - this.elTop;
el.style.transform = `translate(${
xDist}px, ${
yDist}px)`;
el.style.transition = 'all 0.8s cubic-bezier(0.12,0.78,0.53,0.92)';
this.showMoveDot = this.showMoveDot.map(item => false);
done()
},
afterEnter(el) {
// 设置透明度
el.style.opacity = 1;
setTimeout(()=>{
this.count +=1;
},810)
}
}
}
</script>
<style scoped lang="scss">
.move_dot {
width: 50px;
height: 50px;
/*border-radius: 50%;*/
/*background-color: #00b38a;*/
position: fixed;
z-index: 99;
img {
animation: 0.8s move ease-in-out;
width: 50px;
height: 50px;
border-radius: 50%;
}
}
@keyframes move {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.6);
}
75% {
transform: scale(0.4);
}
100% {
transform: scale(0.2);
}
}
@-moz-keyframes move {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.6);
}
75% {
transform: scale(0.4);
}
100% {
transform: scale(0.2);
}
}
@-webkit-keyframes move {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.6);
}
75% {
transform: scale(0.4);
}
100% {
transform: scale(0.2);
}
}
@-o-keyframes move {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.6);
}
75% {
transform: scale(0.4);
}
100% {
transform: scale(0.2);
}
}
</style>