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>


android自定义倾斜拉伸动画

自定义动画的步骤 继承Animation类 覆写applyTransformation()方法。 /** * 倾斜动画。 * 这个动画一般是用来对图像进行倾斜拉伸操作的,如把一个矩形拉伸成一个倾斜...
  • caonima0001112
  • caonima0001112
  • 2015年07月23日 20:53
  • 1071

Android动画(透明度,平移,旋转,拉伸,动态添加按钮)

步骤:透明度变化状态图:代码: //透明度变化 AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1....
  • tuanzi11
  • tuanzi11
  • 2015年09月19日 17:25
  • 2777

transition属性实现div点击拉伸,再点击收回效果

html> html lang="en"> head> meta charset="UTF-8"> title>004title> style> div { w...
  • baidu_33163851
  • baidu_33163851
  • 2016年09月28日 21:03
  • 749

CSS3动画下拉菜单(当transition遇到display的坑)

下拉菜单是页面中很常见的一个元素,但是和标签的默认外观实在不怎么好看,而且它们还很难通过CSS来修改成合意的样式,对hover效果的支持也不好,因此往往会使用或是、这些标签来模拟出下拉菜单的效果。 使...
  • touchingt
  • touchingt
  • 2015年09月21日 18:15
  • 6366

利用CSS Transition来实现动画效果

今天在网上乱逛的时候发现了网站http://studioantwork.com/,其中菜单栏当鼠标悬浮时透明度会降低,一般来说,我们会使用jquery来实现这一过渡效果,不过在这里设计者使用了一种不同...
  • seraph021724
  • seraph021724
  • 2012年10月31日 11:12
  • 7290

Android自定义Transition动画

曾经(或者现在)很多人说起Android和iOS都会拿Android的UI设计来开黑, “你看看人家iOS的设计, 再来看看Android的, 差距怎么就这么大呢?”, 对于这种说辞, 可以一句话来总...
  • qibin0506
  • qibin0506
  • 2016年11月21日 00:10
  • 7128

css3 transition原理(动画系列二)

CSS3过渡效果(css3 transition)基本属性及取值讲解
  • kongbingyan
  • kongbingyan
  • 2016年04月04日 22:12
  • 1231

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐...
  • a460550542
  • a460550542
  • 2017年05月24日 18:23
  • 547

动画--过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay...
  • baidu_35738377
  • baidu_35738377
  • 2016年10月09日 10:21
  • 418

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

最近有一个需求是一个界面上点击一个按钮,打开一个需要显示的View,然后再次点击隐藏,先看效果图展开前的界面展开后的界面实现原理,就是在布局文件中先把,需要显示出来的View写出来,然后再用属性动画动...
  • tongzhengtong
  • tongzhengtong
  • 2016年07月14日 16:02
  • 1652
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:transition拉伸动画
举报原因:
原因补充:

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