简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - css3 animation的问题.我也不知道如何描述
伊谢尔伦
伊谢尔伦 2017-04-17 11:19:01
0
1
435
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .wrapper{
            width:500px;
            height:200px;
            border:1px solid red;
            margin:0 auto;
            overflow:hidden;
        }
        ul{
            height:100px;
            outline:1px solid red
        }
        li{
            list-style:outside none none;
        }
        ul:nth-child(3).active{
            display:block;
            animation: animate ease-in-out 0s 0s ;

        }
        ul:nth-child(4).active{
            display:block;
            animation: animate ease-in-out 1s .5s ;
        }
        ul:nth-child(5).active{
            display:block;
            animation: animate ease-in-out 2s .5s ;
        }
        @keyframes animate{
            0%{
                height:0;
            }
            100%{
                height:100%;

            }
        }
    </style>
</head>
<body>
    <p class="wrapper">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul style='background:red'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul style='background:red'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul style='background:red'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
    <p>click</p>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('p').click(function(){
            $('p').css('height', 'initial');
            $('ul:gt(1)').toggleClass('active');
        });
    });
</script>
</body>
</html>

现在这个效果肯定不满意， 当我触发事件时是一下跳出来了，因为height:auto了，然后动画才开始！！

要的效果是一个一个出来.

多用动画， 进军移动端了

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(1)
伊谢尔伦
伊谢尔伦2017-04-17 11:21:01 1 floor 
    ul:nth-child(3).active{
        display:block;
        animation: animate ease-in-out 0s 0s backwards;

    }
    ul:nth-child(4).active{
        display:block;
        animation: animate ease-in-out 1s .5s backwards;
    }
    ul:nth-child(5).active{
        display:block;
        animation: animate ease-in-out 2s .5s backwards;
    }
    @keyframes animate{
        0%{
            transform:scaleY(0);
        }
        100%{
            transform:scaleY(1);
        }
    }

上面是修改方法。 无论是keyframes还是transition不要用height width,left,top,bottom,right等会引起reflow的属性来作为变化参数。这段代码里面，使用height来作为变化属性导致了这个错误，因为height在不断的改变，p的高度也在改变，导致浏览器一直在重排后来不及重绘，看到的就只有最后一下子跳出来的样子。这段代码放在移动端估计会让手机更卡顿。
另外keyframe animation transform等如果在移动端记得加webkit前缀。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！