vue项目开发引导页-带有动画效果

vue项目开发引导页-带有动画效果，如下图所示
本案例实现步骤是:
1，先开发一个全局的弹框（遮罩层）全局弹框代码-遮罩层
2，添加背景图-使用绝对定位实现元素定位
3，开发带有动画效果的组件

实现动画效果的代码如下所示，PositionGuide.vue：

<template>
    <div class="re-guide">
        <div class="re-content">
            <div class="re-cbtn" v-if="step=='one'">
                <div type="primary" class="btn-block" >

                    <span class="btn-edit"></span>
                    <span class="btn-word">发布新职位</span>

                </div>

            </div>
            <div class="g-btn" v-else>
                <div class="btn-tr">
                    置顶
                </div>
            </div>

            <transition name="fade"
                        @before-enter="beforeEnter"
                        @enter="enter"
                        @after-enter="afterEnter">
                <div class="ta-show" v-if="show">
                    <div >
                        <!-- :class="[step === 'two' ? 'two-line' :'']" -->
                        <div class="job-line"  id="line"></div>
                        <div class="j-tips" id="word">{{info}}</div>
                        <div class="ta-btn" id="btn">
                            <div class="btn-know" @click="doGuideCode">我知道了，马上体验</div>
                            <div class="btn-next" v-if="step == 'one'" @click="doNextFun">下一步</div>
                        </div>
                    </div>
                   <!-- <div>
                        <div class="ta-btn">
                            <div class="btn-know" @click="doGuideCode">我知道了，马上体验</div>
                            <div class="btn-next" @click="doNextFun">下一步</div>
                        </div>

                        <div class="t-tips">2，使用职位置顶，并选择置顶天数，即可在同类职位之上被学生优先看到</div>
                        <div class="tip-line"></div>
                    </div>-->



                </div>

            </transition>
        </div>
    </div>
</template>

<script>
    import { getGuideCode} from '@/network/request'
    export default {
        name: "PositionGuide",
        data(){
            return{
                show:false,
                step:'one',
                info:'1，发布新职位，招聘更多优秀人才' //
            }
        },
        created() {
            setTimeout(()=>{
                this.show =true
            },500)

        },
        methods:{
            beforeEnter(el){
                el.style.transform = "translate(-400px, 238px)"
            },
            enter(el, done){
                el.offsetWidth    // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；  // 可以认为 el.offsetWidth 会强制动画刷新
                // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
                el.style.transform = "translate(782px, 238px)"
                el.style.transition = 'all 1.5s ease'
                //done()
            },
            afterEnter(el){
                // 动画完成之后，会调用 afterEnter
                //  el.style.transition = 'all 0.1s ease'
                this.show = false
            },
            doGuideCode(){
                this.getGuidTip();
                this.$emit("positionFun")
            },
            doNextFun(){
                this.step = 'two'
                this.info = '2，使用职位置顶，并选择置顶天数，即可被学生优先看到'
                let lineDom = document.getElementById('line')
                if(lineDom){
                    /*lineDom.style.transform = 'translate(782px, 258px)';*/
                    lineDom.style.transform = 'translate(0px, 130px) rotateX(180deg)  ';
                    lineDom.style.transition = 'all 1s ease';
                }
                let wordDom = document.getElementById('word')
                if(wordDom){
                    wordDom.style.transform = 'translate(0px, -40px) rotateX(360deg)  ';
                    wordDom.style.transition = 'all 1s ease';
                }
                let btnDom = document.getElementById('btn')
                if(btnDom){
                    btnDom.style.transform = 'translate(0px, -150px) rotateX(360deg)  ';
                    btnDom.style.transition = 'all 1s ease';
                }

            },
            getGuidTip(){
                getGuideCode({guide:1}).then(res =>{
                })
            }
        }
    }
</script>

<style scoped lang="less">
.re-guide{
    height: 100%;
    position: relative;
 /*   height: 100vh;*/

    .re-content{
        position: relative;
        width: 1100px;
        margin: 0 auto;

        .re-cbtn{
            position: absolute;
            left: 915px;
            top: 172px;
            width: 170px;
            height: 60px;
            background-color: #ffffff;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            .btn-block{
                display: flex;
                width:140px;
                height:40px;
                background:#437FFF;
                border-radius:4px;
                align-items: center;
                color: #FFFFFF;
                justify-content: space-evenly;
                &:hover{
                    cursor: pointer;
                }
                .btn-edit{
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                    background: url("../../../assets/img/pic/edit.png") no-repeat;
                    background-size: 16px 16px;
                }
                .btn-word{
                    display: inline-block;
                }
            }
        }

        .g-btn{
            width: 60px;
            height: 52px;
           /* background: #FFFFFF;*/
            position: absolute;
            left: 920px;
            top: 486px;
            display: flex;
            align-items: center;
            justify-content: center;
            .btn-tr{
                width: 96px;
                height: 32px;
                background: #FFFFFF;
                border-radius: 4px;
                line-height: 32px;
                color: #437fff;
                text-align: center;
            }
        }
        .ta-show{

            .tip-line{
                background: url("../../../assets/img/newPic/line1.png") no-repeat;
                width: 150px;
                height: 120px;
                 transform: rotateX(180deg);
               /* transform: rotate(45deg);*/
            }
            .job-line{
                background: url("../../../assets/img/newPic/line1.png") no-repeat;
                width: 150px;
                height: 120px;
            }
            .two-line{
                transform: rotateX(180deg);
            }
            .ta-btn{
                margin: 0 0 20px -288px;
                display: flex;
                .btn-know{
                    background: url("../../../assets/img/newPic/line2.png") no-repeat;
                    background-size: 100% 100%;
                    width: 298px;
                    height: 54px;
                    line-height: 54px;
                    text-align: center;
                    color: #ffffff;

                    &:hover{
                        cursor: pointer;
                    }
                }
                .btn-next{
                    margin-left: 70px;
                    /*width: 60px;*/
                    background: url("../../../assets/img/newPic/line3.png") no-repeat;
                    background-size: 100% 100%;
                    width: 125px;
                    height: 54px;
                    line-height: 54px;
                    text-align: center;
                    color: #ffffff;
                    &:hover{
                        /* color: #437fff;*/
                        cursor: pointer;
                    }
                }
            }

            .t-tips{
                height: 34px;
                font-size: 22px;
                margin: 0 0 20px -326px;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 51px;
            }
            .j-tips{
                height: 34px;
                font-size: 22px;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                color: #FFFFFF;
                line-height: 51px;
                margin: 0 0 20px -288px;
            }
        }



    }
}
</style>

在需要引入的地方引入组件PositionGuide.vue

template v-if="firstFlag">
            <div class="pos-bg">
                <my-dialog :visible="firstFlag">
                    <PositionGuide @positionFun="positionFun"></PositionGuide>
                </my-dialog>
            </div>
        </template>

pos-bg的样式为：

.pos-bg{
        width: 1100px;
        margin: 0 auto;
        height: 84vh;
        background: url("../../assets/img/newPic/job_bg.png") no-repeat;
        background-size: 100%;
    }

my-dialog请参考链接my-dialog