CSS变换div不为空[关闭]
Posted
技术标签:
【中文标题】CSS变换div不为空[关闭]【英文标题】：CSS Transform div on not empty [closed] 【发布时间】：2018-10-11 19:07:03 【问题描述】：在我的网站上，我有一个让用户执行常见任务（例如添加项目）的旁白。有多个步骤（页面），我希望它们使用 CSS 从左到右滑动。
我曾尝试使用空标签和可见性标签来触发转换，但从未发生过。
.slideOnVisible:empty
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
.slideOnVisible:not(:empty)
height: 100%;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
我不需要转换 height 属性，所以如果有更好的方法请告诉我。
我正在使用 Bootstrap、LESS 和 ko.js
这是一个小提琴：https://jsfiddle.net/p97wdqqm/1/
【问题讨论】：
空白算作内容。你确定 div 是空的吗？ 当我在控制台中使用它时，我得到了匹配。 $('.slideOnVisible:empty') 我正在使用带有绑定的 ko.js 以确保它为空。然后，根据他们的操作，我填充将在 div 中创建 html 的属性。 添加了一个小提琴来测试 100% 的高度应该是多少？如果我在身体上施加一些高度，小提琴就像（我想）你想要的那样工作。 jsfiddle.net/p97wdqqm/2 【参考方案1】：原来你想要这样的东西。
var DemoModel = function()
var self = this;
self.obsProperty = ko.observable(null);
self.toggleObsProperty = function()
if (self.obsProperty() === null)
self.obsProperty(
id: 1
);
else
self.obsProperty(null);
;
;
ko.applyBindings(new DemoModel());.slideOnVisible /* initial state */
height: 2em;
width: 0;
white-space: nowrap; /* or it would wrap during the transition */
overflow: hidden;
-webkit-transition: width 2.5s linear;
-moz-transition: width 2.5s linear;
-ms-transition: width 2.5s linear;
-o-transition: width 2.5s linear;
transition: width 2.5s linear;
.slideOnVisible:not(:empty)
width: 10em;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<html>
<body id="main">
<div class="slideOnVisible" data-bind="with: obsProperty">
made it
</div>
<button data-bind="click: toggleObsProperty">Toggle Property</button>
</body>
</html>【讨论】：
以上是关于CSS变换div不为空[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
在 Java 中对资源使用 try 是不是安全 - 它是不是检查可关闭对象是不是不为空，是不是在尝试关闭它时捕获异常
java中io流，不为null时关闭，但是我老感觉如果是读了一半时也是不为空啊，怎么解释
CAKEPHP 3 在数据库中保存成功关闭日期后不为空，它具有今天的值