一次小小的动画需求

需求背景

继上一个扫码登录的需求之后，需要在APP里实现，产品希望扫码登录成功之后，有个缩小的动画让客户了解到入口在哪。其实也是想稍微了解一下CSS3动画，效果大概如图：

Mar-01-2019 18-21-08

实现思路

1.写出页面

1.使用偏移与缩放

2.再一段时间内完成动画，并让画面停在最后一帧

具体实现

1.实现点击之后的modal页面，附带一个遮罩层。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
    <meta http-equiv="Cache-Control" content="max-age=60000" />
    <title>登录</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        margin: 70px auto 0 auto;
        width: 127px;
        height: 127px;
        display: block;
        background-size: 127px 127px;
    }

    .login {
        width: 140px;
        height: 36px;
        margin: 160px auto 20px auto;
        background: white;
        color: #01A0FF;
        border: 1px solid #01A0FF;
        border-radius: 4px;
        font-size: 8px;
        display: block;
        text-align: center;
        line-height: 36px;
    }
    h2{
         text-align: center;
         font-size: 16px;
         font-weight: normal;
         margin-top: 10px;
    }
    .cancel-login {
        font-size: 14px;
        color: #b2b2b2;
        text-align: center;
    }
    .has-error{
        width: 80%;
        margin: 24px auto 0;
        font-size:17px;
        color: #ed4622;
        text-align: center;
    }
    .modal{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
    }
</style>

<body>
    <div class="modal">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZkAAAD40WwsAAAAJHRSTlMAKo7X+NYGlP2YCbv5kTgMvZXkMCv8L4+SB/PUkCwuNAvY+vQbCt0PAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAd5JREFUeNrt2MtOwlAUhtGj1IJayh28FEHd7/+MEsIQJg66NV3fBIb/WW3CCaVIkiRJkiRJkiRJkiRpAN3dj6oYWNXD/d3l+PV4kr0mp8nj0/n8z9FM21n2W9h3s3baxLw+fVvEcpW9JqfVMsalrDfNQM9fyrbarMsuXrJ35PUSuzKKNntGXm2MShN19oy8XqMpEdkrMjudHgCA7BF/CCD7btpXtwGyH0hPjx0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgOxpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBWAgXQTYHgBAACgiTp7RV6zeCujaLNn5NXGe9nFNHtGXtPoyn5TbbN3ZPVRbfalLGK5yl6S03YZi9NH/RxNdzhmr+m746FrYn7+AajHk+y7aU6Tx6eLxrr7/Mpe03ff790+7/27fvsa0J0MAAAAAAAAAAAAAIDBAlwvexcASZKk39Xnv9rZZwUgSZIkSZIkSZIkSZKk/9IPRdh5HZXYXfEAAAAASUVORK5CYII=" />
        <h2>登录确认</h2>
        <h3 class="has-error" id="error"></h3>
        <a class="login" id="login">
            登录
        </a>
        <p class="cancel-login">取消登录</p>
    </div>
</body>
<script type="text/javascript">

</script>

</html>

如图：

WX20190302-184619@2x

2.实现偏移与缩放

偏移

1	transform:translate(x,y);

缩放

1	transform:scale(x,y)

用在modal上看看效果

1	transform: translate(-42%,-44%) scale(0.1,0.1);

缩放，偏移后效果如图

WX20190302-185544@2x

3.过渡

过渡属性
transition-property	指定应用过渡的属性
transition-delay	指定过渡动画开始之前的延时时间
transition-duration	指定动画持续的时间
transition-timing-function	指定动画计算中间值的方法
transition	简写前面的属性

transition简写如下：

1	transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

transition-property

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;

        transition-property: width, height;
        transition-duration: 2s;

        /* Safari */
        -webkit-transition-property: width, height;
        -webkit-transition-duration: 2s;
    }

    div:hover {
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div>

    </div>
</body>

</html>

在鼠标移入div的时候，效果如图：

Mar-02-2019 21-51-41

其实transition-property指定某些属性，在变化的时候会有过渡的效果。

transition-delay

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;

        transition-property: width, height;
        transition-duration: 2s;
        transition-delay: 2s;
        /* Safari */
        -webkit-transition-property: width, height;
        -webkit-transition-duration: 2s;
        -webkit-transition-delay: 2s;
    }

    div:hover {
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div>

    </div>
</body>

</html>

它的效果与上图类似，不过需要等待2秒之后才开始动画

transition-duration

动画经过多少时间执行完毕

transition-timing-function

动画执行的速率变化，它有以下的属性值

WX20190302-214313@2x

4.实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
    <meta http-equiv="Cache-Control" content="max-age=60000" />
    <title>登录</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        margin: 70px auto 0 auto;
        width: 127px;
        height: 127px;
        display: block;
        background-size: 127px 127px;
    }

    .login {
        width: 140px;
        height: 36px;
        margin: 160px auto 20px auto;
        background: white;
        color: #01A0FF;
        border: 1px solid #01A0FF;
        border-radius: 4px;
        font-size: 8px;
        display: block;
        text-align: center;
        line-height: 36px;
    }
    h2{
         text-align: center;
         font-size: 16px;
         font-weight: normal;
         margin-top: 10px;
    }
    .cancel-login {
        font-size: 14px;
        color: #b2b2b2;
        text-align: center;
    }
    .has-error{
        width: 80%;
        margin: 24px auto 0;
        font-size:17px;
        color: #ed4622;
        text-align: center;
    }
    .modal{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
    }
    .modal-scale{
        transform: translate(-42%,-44%) scale(0.1,0.1);
        transition-duration: 2s;
        transition-timing-function: linear;
    }
</style>

<body>
    <div class="modal" id="modal">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZkAAAD40WwsAAAAJHRSTlMAKo7X+NYGlP2YCbv5kTgMvZXkMCv8L4+SB/PUkCwuNAvY+vQbCt0PAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAd5JREFUeNrt2MtOwlAUhtGj1IJayh28FEHd7/+MEsIQJg66NV3fBIb/WW3CCaVIkiRJkiRJkiRJkiRpAN3dj6oYWNXD/d3l+PV4kr0mp8nj0/n8z9FM21n2W9h3s3baxLw+fVvEcpW9JqfVMsalrDfNQM9fyrbarMsuXrJ35PUSuzKKNntGXm2MShN19oy8XqMpEdkrMjudHgCA7BF/CCD7btpXtwGyH0hPjx0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgOxpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBWAgXQTYHgBAACgiTp7RV6zeCujaLNn5NXGe9nFNHtGXtPoyn5TbbN3ZPVRbfalLGK5yl6S03YZi9NH/RxNdzhmr+m746FrYn7+AajHk+y7aU6Tx6eLxrr7/Mpe03ff790+7/27fvsa0J0MAAAAAAAAAAAAAIDBAlwvexcASZKk39Xnv9rZZwUgSZIkSZIkSZIkSZKk/9IPRdh5HZXYXfEAAAAASUVORK5CYII=" />
        <h2>登录确认</h2>
        <h3 class="has-error" id="error"></h3>
        <a class="login" id="login">
            登录
        </a>
        <p class="cancel-login">取消登录</p>
    </div>
</body>
<script type="text/javascript">
    var loginButton = document.getElementById('login');
    var modal = document.getElementById('modal');
    loginButton.addEventListener('click',function(){
        modal.setAttribute('class','modal modal-scale')
    })
</script>

</html>

声明了一个modal-scale的类型，并且在点击登录的时候，加在背景层上，实现效果如下：

modal-scale

总结

使用CSS3属性需要考虑兼容性问题。在做3.0开发，应该会经常用到动画，之后用到再深入学一下。