时间戳

首页 > 解决方案 > CSS变换div不为空

css - CSS变换div不为空

问题描述

在我的网站上，我有一个让用户执行常见任务（例如添加项目）的旁白。有多个步骤（页面），我希望它们使用 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;

}

我不需要转换高度属性，所以如果有更好的方法请告诉我。

我正在使用 Bootstrap、LESS 和 ko.js

这是一个小提琴：https ://jsfiddle.net/p97wdqqm/1/

标签： csstwitter-bootstrap-3knockout.js

解决方案

事实证明你想要这样的东西。

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>

推荐阅读