CSS转换效果没有被执行？

时间：2016-04-26 07:07:03

标签： javascript jquery css css3

我会直截了当地说，我正在尝试使用jQuery创建一个模态插件 我无法从下到上执行幻灯片效果。 我可以看到正在调用样式但我没有看到任何效果。我在这里做错了什么可能是错的？

以下是我目前的代码.. 

var ks = jQuery.noConflict();
(function(ks) {
  ks.fn.extend({
    ksModal:function( options ){
      var defaults = {
        top:100,
        overlay:0.5,
        closeBtn:null
      };
      options = ks.extend(defaults, options);
      return this.each(function(){
        var o = options;
        ks(this).click(function(e){
          ks("body").append("<div id='modal-overlay'></div>");
          var MODAL_TRIGGER = ks(this).attr("href");
          //close via click on overlay
          ks(MODAL_TRIGGER).on("click", function(e){
            _closeModal(e, MODAL_TRIGGER);
          });
          //close via click on close button if added
          ks(o.closeButton).click(function(e){
            _closeModal(e, MODAL_TRIGGER);
          });
          
          ks(MODAL_TRIGGER).addClass("fade-in");
          
          e.preventDefault()
        })
      });
    }
  });
  function _closeModal(e, MODAL_TRIGGER){
    if (ks(e.target).hasClass("ks-modal") || ks(e.target).hasClass("close")){
      ks(MODAL_TRIGGER).removeClass("fade-in");
      ks("#modal-overlay").remove();
    }
  }
})(ks);

//USAGE
ks("a[rel*=ks-modal]").ksModal({closeButton: ".close" });
#modal-overlay {
    display:block;
	  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index:1040;
    background: #000;
    filter: alpha(opacity=50);
    opacity: .5;
}

.ks-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
 }
 
.ks-modal.fade-in {
  display: block;
  opacity: 1;
  /*display: table;
  width: 100%;
  height: 100%;*/
}
.ks-modal .ks-modal-dialog {
    /*vertical-align: middle;
    display: table-cell;
    padding-top: 15%;*/
}
 .ks-modal .ks-modal-container {  
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate3d(0,-25%,0);
    -o-transform: translate3d(0,-25%,0);
    transform: translate3d(0,-25%,0);
 }
 
.ks-modal.bottom .ks-modal-container {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
}

 .ks-modal.fade-in .ks-modal-container {
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.ks-modal-container {
  position: relative;
  width: auto;
  margin: 10px;
}

.ks-modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.ks-modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ks-modal-header .close {
  margin-top: -2px;
}
.ks-modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.ks-modal-body {
  position: relative;
  padding: 15px;
}
.ks-modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.ks-modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.ks-modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

@media (min-width: 768px) {
  .ks-modal-container {
    width: 600px;
    margin: 30px auto;
  }
  .ks-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">

<a rel="ks-modal" href="#modal-id" >Demo</a>
<div class="ks-modal bottom" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="ks-modal-container">
      <div class="ks-modal-content">
        <div class="ks-modal-header">
          Staff Request
          <button type="button" class="close">×</button>
        </div>
        <div class="ks-modal-body">
          SAMPLE BODY
        </div>
        <div class="ks-modal-footer">
          Footer here
        </div>
      </div>

    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

P.S你会注意到我使用的CSS中的类似于bootstrap的样式，是的，它们来自bootstrap。这是该项目所需的唯一样式。

3 个答案:

答案 0 :(得分：1)

transform效果未被发现的原因是因为您要将display从none更改为block。由于display属性无法转换，因此只显示元素而不是优雅地滑动。您需要同时删除幻灯片的display属性。这不会产生任何视觉效果，因为您已经添加了所需的opacity。

您可能想要display: none的另一个原因是确保固定模式不会干扰锚点上的点击事件。您可以将默认z-index更改为负值，然后在.fade-in类中设置更高的值来执行此操作。

＆＃13;
＆＃13; 
var ks = jQuery.noConflict();
(function(ks) {
  ks.fn.extend({
    ksModal: function(options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeBtn: null
      };
      options = ks.extend(defaults, options);
      return this.each(function() {
        var o = options;
        ks(this).click(function(e) {
          ks("body").append("<div id='modal-overlay'></div>");
          var MODAL_TRIGGER = ks(this).attr("href");
          //close via click on overlay
          ks(MODAL_TRIGGER).on("click", function(e) {
            _closeModal(e, MODAL_TRIGGER);
          });
          //close via click on close button if added
          ks(o.closeButton).click(function(e) {
            _closeModal(e, MODAL_TRIGGER);
          });

          ks(MODAL_TRIGGER).addClass("fade-in");

          e.preventDefault()
        })
      });
    }
  });

  function _closeModal(e, MODAL_TRIGGER) {
    if (ks(e.target).hasClass("ks-modal") || ks(e.target).hasClass("close")) {
      ks(MODAL_TRIGGER).removeClass("fade-in");
      ks("#modal-overlay").remove();
    }
  }
})(ks);

//USAGE
ks("a[rel*=ks-modal]").ksModal({
  closeButton: ".close"
});
＆＃13; 
#modal-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1040;
  background: #000;
  filter: alpha(opacity=50);
  opacity: .5;
}
.ks-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
  z-index: -1;
}
.ks-modal.fade-in {
  opacity: 1;
  z-index: 1050;
  /*display: table;
  width: 100%;
  height: 100%;*/
}
.ks-modal .ks-modal-dialog {
  /*vertical-align: middle;
    display: table-cell;
    padding-top: 15%;*/
}
.ks-modal .ks-modal-container {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate3d(0, -25%, 0);
  -o-transform: translate3d(0, -25%, 0);
  transform: translate3d(0, -25%, 0);
}
.ks-modal.bottom .ks-modal-container {
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0);
}
.ks-modal.fade-in .ks-modal-container {
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ks-modal-container {
  position: relative;
  width: auto;
  margin: 10px;
}
.ks-modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.ks-modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ks-modal-header .close {
  margin-top: -2px;
}
.ks-modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.ks-modal-body {
  position: relative;
  padding: 15px;
}
.ks-modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.ks-modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.ks-modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
@media (min-width: 768px) {
  .ks-modal-container {
    width: 600px;
    margin: 30px auto;
  }
  .ks-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">

<a rel="ks-modal" href="#modal-id">Demo</a>
<div class="ks-modal bottom" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="ks-modal-container">
    <div class="ks-modal-content">
      <div class="ks-modal-header">
        Staff Request
        <button type="button" class="close">×</button>
      </div>
      <div class="ks-modal-body">
        SAMPLE BODY
      </div>
      <div class="ks-modal-footer">
        Footer here
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

如果您不想更改默认z-index，则可以使用pointer-events属性并为原始状态设置值none（表示没有指针事件比如在隐藏的覆盖元素上发生了单击，然后在all类中将其设置为.fade-in（意味着，当它处于可见状态时单击可以工作）。

＆＃13;
＆＃13; 
var ks = jQuery.noConflict();
(function(ks) {
  ks.fn.extend({
    ksModal: function(options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeBtn: null
      };
      options = ks.extend(defaults, options);
      return this.each(function() {
        var o = options;
        ks(this).click(function(e) {
          ks("body").append("<div id='modal-overlay'></div>");
          var MODAL_TRIGGER = ks(this).attr("href");
          //close via click on overlay
          ks(MODAL_TRIGGER).on("click", function(e) {
            _closeModal(e, MODAL_TRIGGER);
          });
          //close via click on close button if added
          ks(o.closeButton).click(function(e) {
            _closeModal(e, MODAL_TRIGGER);
          });

          ks(MODAL_TRIGGER).addClass("fade-in");

          e.preventDefault()
        })
      });
    }
  });

  function _closeModal(e, MODAL_TRIGGER) {
    if (ks(e.target).hasClass("ks-modal") || ks(e.target).hasClass("close")) {
      ks(MODAL_TRIGGER).removeClass("fade-in");
      ks("#modal-overlay").remove();
    }
  }
})(ks);

//USAGE
ks("a[rel*=ks-modal]").ksModal({
  closeButton: ".close"
});
＆＃13; 
#modal-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1040;
  background: #000;
  filter: alpha(opacity=50);
  opacity: .5;
}
.ks-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
  z-index: 1050;
  pointer-events: none;
}
.ks-modal.fade-in {
  opacity: 1;
  pointer-events: all;
  /*display: table;
  width: 100%;
  height: 100%;*/
}
.ks-modal .ks-modal-dialog {
  /*vertical-align: middle;
    display: table-cell;
    padding-top: 15%;*/
}
.ks-modal .ks-modal-container {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate3d(0, -25%, 0);
  -o-transform: translate3d(0, -25%, 0);
  transform: translate3d(0, -25%, 0);
}
.ks-modal.bottom .ks-modal-container {
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0);
}
.ks-modal.fade-in .ks-modal-container {
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ks-modal-container {
  position: relative;
  width: auto;
  margin: 10px;
}
.ks-modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.ks-modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ks-modal-header .close {
  margin-top: -2px;
}
.ks-modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.ks-modal-body {
  position: relative;
  padding: 15px;
}
.ks-modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.ks-modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.ks-modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
@media (min-width: 768px) {
  .ks-modal-container {
    width: 600px;
    margin: 30px auto;
  }
  .ks-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">

<a rel="ks-modal" href="#modal-id">Demo</a>
<div class="ks-modal bottom" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="ks-modal-container">
    <div class="ks-modal-content">
      <div class="ks-modal-header">
        Staff Request
        <button type="button" class="close">×</button>
      </div>
      <div class="ks-modal-body">
        SAMPLE BODY
      </div>
      <div class="ks-modal-footer">
        Footer here
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果您想应用转场，则不应使用display: none和display:block，而是使用left技巧：

＆＃13;
＆＃13; 
var ks = jQuery.noConflict();
(function(ks) {
  ks.fn.extend({
    ksModal:function( options ){
      var defaults = {
        top:100,
        overlay:0.5,
        closeBtn:null
      };
      options = ks.extend(defaults, options);
      return this.each(function(){
        var o = options;
        ks(this).click(function(e){
          ks("body").append("<div id='modal-overlay'></div>");
          var MODAL_TRIGGER = ks(this).attr("href");
          //close via click on overlay
          ks(MODAL_TRIGGER).on("click", function(e){
            _closeModal(e, MODAL_TRIGGER);
          });
          //close via click on close button if added
          ks(o.closeButton).click(function(e){
            _closeModal(e, MODAL_TRIGGER);
          });
          
          ks(MODAL_TRIGGER).addClass("fade-in");
          
          e.preventDefault()
        })
      });
    }
  });
  function _closeModal(e, MODAL_TRIGGER){
    if (ks(e.target).hasClass("ks-modal") || ks(e.target).hasClass("close")){
      ks(MODAL_TRIGGER).removeClass("fade-in");
      ks("#modal-overlay").remove();
    }
  }
})(ks);

//USAGE
ks("a[rel*=ks-modal]").ksModal({closeButton: ".close" });
＆＃13; 
#modal-overlay {
    display:block;
	  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index:1040;
    background: #000;
    filter: alpha(opacity=50);
    opacity: .5;
}

.ks-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 0;
  left: -100000px;
  z-index: 1050;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear, left 0s .15s, width 0s .15s;
 }
 
.ks-modal.fade-in {
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  transition: opacity .15s linear, left 0s 0s, width 0s 0s;
  /*display: table;
  width: 100%;
  height: 100%;*/
}
.ks-modal .ks-modal-dialog {
    /*vertical-align: middle;
    display: table-cell;
    padding-top: 15%;*/
}
 .ks-modal .ks-modal-container {  
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate3d(0,-25%,0);
    -o-transform: translate3d(0,-25%,0);
    transform: translate3d(0,-25%,0);
 }
 
.ks-modal.bottom .ks-modal-container {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
}

 .ks-modal.fade-in .ks-modal-container {
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.ks-modal-container {
  position: relative;
  width: auto;
  margin: 10px;
}

.ks-modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.ks-modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.ks-modal-header .close {
  margin-top: -2px;
}
.ks-modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.ks-modal-body {
  position: relative;
  padding: 15px;
}
.ks-modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.ks-modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.ks-modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

@media (min-width: 768px) {
  .ks-modal-container {
    width: 600px;
    margin: 30px auto;
  }
  .ks-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">

<a rel="ks-modal" href="#modal-id" >Demo</a>
<div class="ks-modal bottom" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="ks-modal-container">
      <div class="ks-modal-content">
        <div class="ks-modal-header">
          Staff Request
          <button type="button" class="close">×</button>
        </div>
        <div class="ks-modal-body">
          SAMPLE BODY
        </div>
        <div class="ks-modal-footer">
          Footer here
        </div>
      </div>

    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

为什么不使用数据转换属性来使用这个jquery转换，而不是编写自己的类。 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">


  <div data-role="main" class="ui-content">

    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">Pop</a>


    <div data-role="popup" id="myPopup" class="ui-content">
      <p>Test popup.</p>
    </div>
  </div>
</div> 

</body>
</html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">Pop</a> <div data-role="popup" id="myPopup" class="ui-content"> <p>Test popup.</p> </div> </div> </div> </body> </html>

相关问题
最新问题