transition拉伸动画

原创 2015年07月06日 18:01:58

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>


相关文章推荐

动画拉伸示例

  • 2013年06月14日 23:10
  • 127KB
  • 下载

android自定义倾斜拉伸动画

自定义动画的步骤 继承Animation类 覆写applyTransformation()方法。 /** * 倾斜动画。 * 这个动画一般是用来对图像进行倾斜拉伸操作的,如把一个矩形拉伸成一个倾斜...

渐变动画、图片拉伸、copy、按钮、kvc、kvo

渐变动画、图片拉伸、copy、按钮、kvc、kvo标签(空格分隔): ios基础渐变动画 方式1:头尾式 [UIView beginAnimations:nil context:nil]; [UIVi...

Activit跳转动画之界面上某个位置 裂开上下拉伸动画跳转

需求:Activity(fragment)跳转的时候当前界面裂开,上下各自拉出手机屏幕,之后跳转到相对应的Activity.整体效果图如下思路:1,在当前Activity中截取当前手机的屏幕获取到bi...

展开拉伸动画---属性动画

最近有一个需求是一个界面上点击一个按钮,打开一个需要显示的View,然后再次点击隐藏,先看效果图展开前的界面展开后的界面实现原理,就是在布局文件中先把,需要显示出来的View写出来,然后再用属性动画动...

Android转场动画-Activity_Transition

  • 2015年07月29日 17:47
  • 2.44MB
  • 下载

CSS3过渡动画transition详解

CSS3过渡动画transition详解 transition是指过渡动画,让css属性的变化是可连续的、可控时间的、可控变化曲线的做出改变,无论是鼠标事件还是点击事件,只要设置的CSS属性发生...

css动画的transition渐变属性

越来越喜欢css3了。 这里写一写渐变(不用js真是好 啊^_^) 当然transition还需要头名称:-moz-,-webkit-,-o-,来保证能在不同的浏览器中使用(什么时候这几个厂商才能谈清...

Transition动画框架

在前一篇文章中,我们初步了解android.transition框架并开始着手AndroidTransitionExample项目。今天,我们将继续进一步探索如何使用这些类,以及如何从xml文件中加载...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:transition拉伸动画
举报原因:
原因补充:

(最多只允许输入30个字)