CSS transform effect not being performed?

Question

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.

Harry · Accepted Answer · 2016-04-26 07:46:44Z

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>

t1m0n · Accepted Answer · 2016-04-26 07:51:29Z

You should not use display: none and display:block if you want to apply transitions, use left trick instead:

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

<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>

Murlidhar Fichadia · Accepted Answer · 2016-04-26 07:23:44Z

0

Instead of writing your own class why not use this jquery transition using data-transition property.



<!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>

answered Apr 26, 2016 at 7:23

Murlidhar Fichadia

2,6298 gold badges47 silver badges104 bronze badges

1 Comment

JF-Mechs Over a year ago

thanks for the suggestion, but I am trying to get rid of other 3rd party technologies other than jquery.. soon maybe i'll be just using jquery-lite, so as much as possible I'd like to make this one work :)

Collectives™ on Stack Overflow

CSS transform effect not being performed?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related