Question

我最近为我的项目实施了Anno.js。出于造型目的，我重新设计了＃34; Anno Boxes＆＃34;使用bootstrap模态布局。这就是AnnoBox通常的样子：

this._annoElem = $("<div class='anno anno-hidden " + this.className + "'>\n<div class='anno-inner'>  <div class='anno-arrow'></div>  </div>\n</div>");
        this._annoElem.find('.anno-inner').append(this.contentElem()).append(this.buttonsElem());

我刚刚删除了所有的anno类并为modal插入了适当的bootstrap类，所以modal, modal dialog, modal-content, modal-hedaer）和stlying很好，但是有一个问题。 Anno在Anno页面上使用一些过渡来更改两个框（参见anno2.show）。在我删除了那些anno类（导致转换）后，我有了......比如盒子出现之间的延迟，因为不再有过渡。现在，我想知道如何将转换功能实现到我的模态中。

对我而言，似乎转换来自类anno和anno-hidden，它们定义如下：

.anno {
  position: absolute;
  padding: 15px;
  z-index: 5000;
  width: 300px;
  cursor: default;
  text-transform: none;
  text-align: left;
  line-height: 0.9em;
  -webkit-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -moz-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -ms-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -o-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -webkit-transition-property: opacity, margin;
  -moz-transition-property: opacity, margin;
  transition-property: opacity, margin;
}

.anno.anno-hidden {
  opacity: 0;
}

.anno-overlay.anno-hidden {
  pointer-events: none;
  opacity: 0;
}

您还可以在Annos Github和here完整的js找到完整的CSS。

我尝试将类Anno中编写的代码添加到我的模态类中，所以我添加了

 -webkit-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -moz-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -ms-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -o-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
  -webkit-transition-property: opacity, margin;
  -moz-transition-property: opacity, margin;

  transition-property: opacity, margin;

但这没有任何改变。我不知道这是如何工作的，以及这一切是如何一起工作的，所以不管怎样它似乎可以将不透明度从100％改为0％（淡出第一个盒子）然后（另一方面）方框）从0％到100％。但到目前为止我还不知道如何才能达到这种行为。有人可以解释一下，这是如何工作的，以及我如何实现这个？

CSS过渡 - 了解功能

0 个答案: