vue自制类似购物车效果实例 点击确定出新一个弧形动画

运用场景，点击导出，一个下载标识从导出出发，来到下载中心停止，任务生成。

一、html代码段

<style>
    .add_img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            right: 200px;
            top: -50px;
            z-index: 99999;
            transition: all 1s;
        }
</style>



<div id="downloadCenter">
    <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
        <img class="add_img" v-if="addShow" src="/images/downquit.png" alt="">
    </transition>
</div>

 

二、js代码段

var downloadCenter = new Vue({
        el:'#downloadCenter',
        data:function(){
            var _this=this;
            return{
                addShow:false,
                btnTop:0,
                btnLeft:0
            }
        },
        mounted:function(){
            var _this = this;
        },
        methods: {
            // 进入前状态
            beforeEnter: function(el) {
                var _this = this
                el.style.right = (document.body.scrollWidth - _this.btnLeft) + 'px'
                el.style.top = _this.btnTop + 'px'
                el.style.transform = 'scale(1)'
            },
            // 进入中
            enter: function(el, done) {
                el.offsetWidth
                el.style.right = '200px'
                el.style.top = '0px'
                el.style.transform = 'scale(.5)'
                done()
            },
            // 进入后
            afterEnter: function() {
                var _this = this
                if (_this.addShow) {
                    _this.addShow = false
                }
            },
            download: function (id) {
                var _this = this;
                _this.btnTop = $('#' + id).offset()['top'];
                _this.btnLeft = $('#' + id).offset()['left']+($('#'+id).outerWidth(true));
                _this.addShow = true;
            }
        }
    })