JF-Mechs JF-Mechs - 7 months ago 12
Javascript Question

CSS transform effect not being performed?

I'll go straight to the point, I am trying to create a modal plugin using jQuery
and I was not able to perform an slide from bottom to top effect.
I can see that the styles are being invoked but I don't see any effect. What could be possible things that I am doing wrong in here?

The following are my code so far ..



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 You'll notice similar style's in bootstrap with the CSS I am using, yes, they came from bootstrap . Which is the only styles that I need for this project.

Answer

The reason for the transform effect not being seen is because you are changing the display from none to block. Since display property cannot be transitioned, the element just appears instead of sliding in gracefully. You need to remove both the display properties for the slide-in to happen. This will not cause any visual effect because you already have the required opacity added.

Another reason why you may have wanted the display: none was to make sure that the fixed modal didn't interfere with the click event on the anchor. You can do this by changing the default z-index to a negative value and then setting the higher value in the .fade-in class.

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;
  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);
  }
}
<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>

If you don't wish to change the default z-index then you could use the pointer-events property and set a value of none for the original state (meaning no pointer events like click happens on the hidden overlay element) and then set it to all within the .fade-in class (meaning, click works when it is in the visible state).

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;
  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);
  }
}
<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>