transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。
transition属性是一个简写属性,用于设置四个过渡属性
transition-property :指定要过渡的css属性
transition-duration: 指定完成过渡花费的时间
transition-timing-function: 指定速度效果的速度曲线
transition-delay:指定过渡效果何时开始
state数据2
/5
渲染列表
3
/5
触发向上、向下滚动方法
开始滚动:setInterval() 定时调用滚动方法
停止滚动:clearInterval() 取消定时器
4
/5
向上滚动方法:
1、数组第一条添加到数组末尾 - push()
2、列表向上滚动添加css3过渡动画
3、计算向上滚动距离(第一条数据高度,如果高度固定用固定值即可)
4、删除数组第一条数据 - shift()
5、向上滚动距离清零
6、取消过渡动画停止滚动
5
/5
向下滚动方法:
1、列表向下滚动添加css3过渡动画
2、计算向下滚动距离(最后一条数据高度,如果高度固定用固定值即可)
3、数组最后一条数据添加到数组头部 - unshift()
4、第一条数据添加渐显动画
5、删除数组最后一条数据 - pop()
6、向上滚动距离清零
7、取消过渡动画停止滚动
<script type="text/javascript">$(document).ready(function() {
$("input").click(function() {
$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显,你可以测试一下,如果不是你想要的效果,你可以查一下jq的渐隐效果函数或者animate()函数,控制这个input的透明度就好了,例如 $(this).animate(‘opacity’,‘0’);
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b")
//点击其他地方消除b效果
})
return false
})
})