SOURCE

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        show: false,
        imgIndex: 1
    },
    methods: {
        handleClick: function() {
            if (this.imgIndex == 1) {
                this.imgIndex = 2;
            } else {
                this.imgIndex = 1;
            }
        }
    }
})

<div id="app">
    <div class="phone-container">
        <img class="phone-img" v-bind:class="{ 'phone-img-animate': imgIndex == 1 }"
        key="img1" src="https://3gimg.qq.com/tencentMapTouch/lubao/phone1.png"
        />
        <img class="phone-img" v-bind:class="{ 'phone-img-animate': imgIndex == 2 }"
        key="img2" src="https://3gimg.qq.com/tencentMapTouch/lubao/phone2.png"
        />
    </div>
    <button @click="handleClick">
        切换
    </button>
</div>

.phone-container {
    position: absolute;
    width: 370px;
    height: 720px;
    border: 1px solid red;
    background-image: url("https://3gimg.qq.com/tencentMapTouch/lubao/phone_bg.png");
    background-size: 100% 100%;
}

.phone-img {
    position: absolute;
    top: 48px;
    width: 276px;
    height: 581px;
    left: 50%;
    margin-left: -138px;
    opacity: 0;
    transition: 1s;
}

.phone-img-animate {
    opacity: 1;
}

button {
    position: absolute;
    left: 400px;
}