关闭

transition拉伸动画

标签: 移动端开发 HTML5transitionwebappjs
46人阅读 评论(0) 收藏 举报

transition是css新加入的过渡属性。使用方式是:transition:height 0.6s;

这里height可以替换为其他的属性。比如我现在做的是上下拉伸的动画所以我定义为height高度改变时加入过渡效果。而过渡的时间为0.6s 而时间参数后面还可以加入 ease-in 之类的参数可以做到先快后满等待的效果。

我的代码结构是:

<div class="content">
            <div class="content-head">您是由【海南水果岛】推荐</div>
            <div>
                <div class="content-menu"><img src="images/products/xiala.png" style="height: 1em;"> 岛民<span class="content-menu-num">0 人</span></div>
                <div id="content-show">
                    <div class="content-twomenu">一级岛民<span class="content-twomenu-num">0</span></div>
                    <div class="content-twomenu">二级岛民<span class="content-twomenu-num">0</span></div>
                    <div class="content-twomenu">三级岛民<span class="content-twomenu-num">0</span></div>
                </div>
            </div>
        </div>

定义了content-show的过渡属性。

    #content-show{
            transition:height 0.6s;
            -moz-transition:height 0.6s ;
            -webkit-transition: height 0.6s;
            -o-transition:height 0.6s;
            overflow: hidden;
            height: 115px ;
        }

通过js判断当前content-show模块的高度为115还是0.而改变其高度。因为设置了transition属性,所以在高度发生改的时候就会有过渡的动画效果了。

<script>
        (function(){
            var display=true;
            var btn=document.getElementsByClassName('content-menu')[0];
            var show=document.getElementById('content-show');
            btn.onclick=function(){
                display=!display;
                show.style.height=display?"115px":"0px"
                return false;
            };
        })();
        </script>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:144次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档