CSS变换div不为空[关闭]答案

【问题标题】：CSS Transform div on not empty [closed]CSS变换div不为空[关闭]
【发布时间】：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

标签： css twitter-bootstrap-3 knockout.js

【解决方案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>

【讨论】：