案例实践：

• 第一页会以动画形式进入页面；
• 点击进入按钮时，第一页以动画消失，第二页以动画形式进入，同时四张图片也定义从小到大的动画形式；
• 第二页关闭按钮点击时，先是四张图片以缩小动画消失，然后第二页以动画形式消失，第一页以动画形式进入。

 

 

JS代码:

(function(){    // 定义变量    var container = $('.container');                   //主容器    var boxFront = $('.box-front');                    //卡片正面    var mkLogo = $('.img-head');                       //卡片logo(火焰logo)    var boxBack = $('.box-back');                      //卡片背面    var boxBackImgs= $('.box-back').find('img');       //卡片背面中四幅图片    // 自定义动画---进入    $.Velocity.RegisterUI('mk.slideUp',{        defaultDuration:500,        calls:[            [{opacity:[1,0],translateY:[0,100]}]        ]    });    // 自定义动画---消失    $.Velocity.RegisterUI('mk.slideDown',{        defaultDuration:300,        calls:[            [{opacity:[0,1],translateY:[100,0]}]        ]    })    // 自定义动画---图片弹性放大    $.Velocity.RegisterUI('mk.scaleImg',{  //定义动画名称        defaultDuration:500,        calls:[            [{opacity:[1,0],scale:[1,0]}]  //[1,0]表示[结束状态,开始状态]        ]    })    // 自定义动画---图片弹性缩小    $.Velocity.RegisterUI('mk.scaleImg02',{        defaultDuration:500,        calls:[            [{opacity:[0,1],scale:[0,1]}]        ]    })    // 定义正面进入序列    var seqFront = [        {            elements:container,            properties:'mk.slideUp',            options:{                delay:300   // 设置延时            }        },        {            elements:boxFront,            properties:'mk.slideUp',            options:{                sequenceQueue:false // 设置队列形式为同时            }        },        {            elements:mkLogo,            properties:'mk.slideUp',            options:{                                sequenceQueue:false,                delay:60            }        }    ];    // 定义点击“进入”按钮正面消失的序列及背面出现的序列    var btnClick = [        {            elements:container,            properties:'mk.slideDown'        },        {            elements:boxFront,            properties:'mk.slideDown',            options:{                sequenceQueue:false            }        },        {            elements:mkLogo,            properties:'mk.slideDown',            options:{                                sequenceQueue:false            }        },{            elements:container,            properties:'mk.slideUp',            options:{                delay:100            }        },{            elements:boxBack,            properties:'mk.slideUp',            options:{                sequenceQueue:false            }        },{            elements:boxBackImgs,            properties:'mk.scaleImg',            options:{                delay:60            }        }    ];    // 定义点击“关闭”按钮背面消失的序列和正面出现的序列    var closeClick = [        {            elements:boxBackImgs,            properties:'mk.scaleImg02',            options:{                                sequenceQueue:false            }        },        {            elements:container,            properties:'mk.slideDown'        },        {            elements:boxBack,            properties:'mk.slideDown',            options:{                sequenceQueue:false            }        },        {            elements:container,            properties:'mk.slideUp',            options:{                delay:200            }        },{            elements:boxFront,            properties:'mk.slideUp',            options:{                sequenceQueue:false            }        },{            elements:mkLogo,            properties:'mk.slideUp',            options:{                sequenceQueue:false            }        }    ];        // 初始化正面    $.Velocity.RunSequence(seqFront);    // 正面进入按钮点击事件    $('.btn').on('click',function(){        $.Velocity.RunSequence(btnClick);    })    // 背面关闭按钮点击事件    $('.close').on('click',function(){        $.Velocity.RunSequence(closeClick);    })})(jQuery)

 

HTML代码:

    
             
                     
     
        
              
      
            
                   
                   
       
                
        
慕课网
                
        慕课网,只学有用的。                
        点击进入            
       
        
      
        
              
      
            
       
        x
       
            
       
慕课网
            
       慕课网,只学有用的。            
                   
                   
                   
               
      
    
     
    

 

CSS样式:

*{
    margin: 0; padding: 0; }body{
       background-color: #333; overflow-y:hidden;}.container{
       width: 320px; height: 430px; background-color: #fff; margin: 60px auto;    position: relative;}/*正面*/.box-front{
       position: relative; z-index: 2;}.img-back{
       width: 320px; height: 213px;}.img-head{
       position: absolute; top: 213px; left: 50%; width: 90px; height: 90px; border-radius: 50%;    margin-left: -45px; margin-top: -45px; border:2px solid #f0f0f0;}.intro{
       margin-top: 45px; text-align: center;}.intro h3{
       display: inline-block; width: 100%; margin-top: 5px;}.intro span{
       display: inline-block; width: 100%; margin-top: 15px;}.intro .btn{
       display: inline-block; width: 82%; color: #fff; background-color: #2444FF; padding: 10px;    text-decoration: none; border-radius: 6px; margin-top: 40px; transition: background 1s;    cursor: pointer;}.intro .btn:hover{
       background-color: #2468FF;}/*卡片背面样式*/.box-back{
       position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #333; z-index: 1}.box-back .close{
       position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; line-height: 10px;    font-size: 18px; color:#999; cursor: pointer; }.box-back .close:hover{
       color: #f00;}.box-back h3{
       text-align: center; margin-top: 20px;  font-size: 24px;}.box-back span{
       display: block; text-align: center; font-size: 16px; margin: 10px 0 30px;}.box-back img{
       display: inline-block; margin: 0px 0px 12px 10px; width: 143px;}.container,.box-front,.img-head,.box-back,.box-back img{
       opacity: 0;}

 

参考：