SOURCE

new Vue({
        el: "#app",
        data: {
            show: false
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })

<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
</script>
<div id="app">
    <button @click="handleClick">切换</button>
    <div class="container">
        <div class="head" v-bind:class="{'head-animate':show}"></div>
        <div class="line" v-bind:class="{'line-animate':show}"></div>
		<div class="con" v-bind:class="{'con-animate':show}">
            <img width="27" height="24" src="http://3gimg.qq.com/tencentMapTouch/lubao/find.png"/>
        </div>
    </div>
        
</div>

.container{
    position: absolute;
    top:200px;
    left: 250px;
}
.head{
    position: relative;
    width: 72px;
    height: 196px;
    margin: 0 auto;
    transition: 1s;
    /* background-color:white; */
    background-image:url("https://3gimg.qq.com/tencentMapTouch/lubao/img_start.png");
}
.head-animate{
    /* background: -webkit-linear-gradient(#6248F0, #047CDC); */
    /* background-color:#6248F0; */
    background-image:url("https://3gimg.qq.com/tencentMapTouch/lubao/img_end.png");
    transform: translateY(-50px);
}
.con{
    position: relative;
    font-size: 20px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: #A1B3D4 ;
    margin:0 auto;
    transition: 1s;
}

.con img{
    position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.con-animate{
    transform: scale(1.3) translateY(-50px);
    background-color: #047CDC ;
}
.line{
    position: relative;
    margin: 0 auto;
    width: 1px;
    height: 300px;
    background-color:  #A1B3D4;
    transition: 1s;
}
.line-animate{
    transform: translateY(-50px);
    background-color: #047CDC ;
}