Question

我有一个应该可重复使用的模式视图，因此我首先使用基本参数和动画设置其样式，然后再设置大小的类。

  <div id="waitingModal" class="modalBox modalOverride">
     //some content here
  </div>

那么可重用的样式是：

.modalBox
{
  display: block;
  position: absolute;
  /* i removed the width/height from here to make it generic */
  text-align: center;
  z-index: 1; /* Sit on top */
  border-radius: 32px;
  overflow: hidden;
  background-color: rgba(250,250,250,1.0);
  -webkit-box-shadow: 4px 4px 4px 1px rgba(142,142,142,0.2);
  -moz-box-shadow: 4px 4px 4px 1px rgba(142,142,142,0.2);
  box-shadow: 3px 3px 3px 1px rgba(142,142,142,0.2);
  color: black;

  transform: scale(1);
  transition: all 0.5s;

}

.modalBox.animate {
    transform: scale(1);
}

在这种情况下，我为每种情况设置的样式是：

.modalOverride
{
height: 60vw;
width: 60vw;
margin-left: auto ;
margin-right: auto  ;
background-color:rgb(250,250,250);

}

显示为：

  $('.modalBox').addClass('animate');

当我从width/height删除.modalBox样式时，它根本不会在页面上显示/动画，并且当我设置 width/height时在modalBox样式中，可以使用，但是我无法在modalOverride中对其进行更改。

该如何正确设置以便我设置每种情况的宽度/高度/位置？

没有设置宽度/高度的通用动画模式视图将不起作用

0 个答案: