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

冷不防 2023-01-02 11:21 241阅读 0赞

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

![在这里插入图片描述][20210105164416827.gif_pic_center]

实现动画效果的代码如下所示，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 >
                            
                            <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>
    
                </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][-]

[-]: https://blog.csdn.net/weixin_44994731/article/details/111604420
[20210105164416827.gif_pic_center]: /images/20221119/863793778b8d48efb978a4d7132c49f0.png