html怎么设置动画保持,html – 如何使用CSS3为td列可见性设置动画

元素的display属性不是可转换或可动画的属性,因此对该属性值的任何更改都将立即发生,而不管通过transition属性设置的任何持续时间或延迟.

您可以通过将类设置为td的div子类,在下面的代码段中执行此操作.

笔记：

>如果你没有设置border-collapse：collapse(也就是说,边框是分开的)那么td之间的边框看起来会加倍,因为即使第二个td变为0px宽,td仍然存在所以边界仍然存在.

>默认情况下,td元素在所有四个边上都是1px填充(至少在Chrome中),这也会产生一个空格,可以通过在td上使用填充：0px来使其无效.

function HideColumn() {

var el = document.getElementById('columntarget');

el.className += 'hideColumn';

}

.hideColumn {

width: 0px;

overflow: hidden;

transition: all 2s step-end;

}

div {

width: 50px;

}

td {

padding: 0px;

}

table {

border-collapse: collapse;

}

column 1

column 2

column 3

Hide

我没有完全理解为表分配宽度时的问题是什么,因为td在延迟后仍然隐藏.如果您指的是其余两列扩展占据整个宽度,那么可以通过执行以下操作来解决：

>设置表格布局：固定;到桌子.

>也将宽度(等于div宽度)添加到td.

>通过JS将.hideColumn类应用于td并转换td和div的宽度.

function HideColumn() {

var el = document.getElementById('columntarget');

el.className += 'hideColumn';

}

.hideColumn > div {

width: 0px;

overflow: hidden;

transition: all 2s step-end;

}

td,div {

width: 50px;

padding: 0px;

}

.hideColumn {

width: 0px;

transition: all 2s step-end;

}

table {

border-collapse: collapse;

table-layout: fixed;

}

column 1

column 3

column 2

Hide

html怎么设置动画保持,html – 如何使用CSS3为td列可见性设置动画相关推荐

html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果
在做 GithubProfile 项目的时候,使用了数字动画展示的效果,如My GithubProfile页面中的commits,stars以及followers数字.实际使用中,由于数字字体不等宽, ...
Java风车动画代码_纯DOM+CSS3实现简单的小风车动画
html> 小风车-转啊转 html { font-size: 10px; } html * { -webkit-box-sizing: border-box; box-sizing: bord ...
php设置加载动画,如何用CSS3制作页面圆圈加载动画（附代码）
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
Android动画效果 translate、scale、alpha、rotate 切换Activity动画控件位置调整
2011.10.28注:如果需要控件停在动画后的位置,需要设置android:fillAfter属性为true,在set节点中.默认在动画结束后回到动画前位置.设置android:fillAfter后 ...
CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
通过js滚轮滚动时调用动画_WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画 ...
原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px.//左侧容器 .ite ...
flash动画制作成品_Flash如何制作沿曲线移动的箭头动画
箭头动画是制作一些流程类动画经常会用到的效果,主要用到的是动作补间动画,这里就简单讲一下使用Flash软件如何制作沿着曲线移动的箭头动画效果. FLASH制作循环移动的箭头动画-百度经验jingya ...

html怎么设置动画保持,html – 如何使用CSS3为td列可见性设置动画

html怎么设置动画保持,html – 如何使用CSS3为td列可见性设置动画相关推荐

最新文章

热门文章