logo
down
shadow

CSS Click after transform


CSS Click after transform

By : Zhi Pan
Date : November 22 2020, 09:00 AM
like below fixes the issue My problem is very simple, but I can't figure out where it comes from. , OP question:
code :
$('.delete').click(

  function() {
    $(this).addClass("active");
  });

$('.form-slide button').click(

  function() {
    $('.delete').removeClass("active");
    alert($(this).text());
  });
.form-anim-right-click {
  position: relative;
  overflow: hidden;
}
.form-anim-right-click > .form-group {
  width: 200%;
}
.form-anim-right-click > .form-group > .btn {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn.active {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn.active + .form-slide {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click .form-slide {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click .form-slide > .row {
  margin-left: 0;
  margin-right: 0;
  padding: 0 4px;
}
.form-anim-right-click .form-slide > .row > div {
  display: inline-block;
}
.form-anim-right-click .form-slide > .row >[class^="col-"] {
  padding: 0 2.66666667px;
}
.form-anim-right-click .form-slide > .row label {
  margin-bottom: 0;
  line-height: 1.6em;
  font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
  color: #01273c;
}
.form-anim-right-click .form-slide > .row .btn-xs {
  padding-left: 4px;
  padding-right: 4px;
  z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-anim-right-click">
  <div class="form-group">
    <button type="button" class="btn btn-xs btn-block btn-primary delete ">Delete</button>
    <div class="form-slide">
      <div class="row">
        <div>
          <button type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
        </div>
        <div>
          <button type="button" class="btn btn-xs btn-block btn-secondary">No</button>
        </div>
        <div>
          <input type="text">Text</div>
      </div>
    </div>
  </div>
</div>
var deleteButton = document.getElementById("delete");
var yesButton = document.getElementById("yes");
var noButton = document.getElementById("no");

deleteButton.addEventListener("click", deleteButtonFunction);
yesButton.addEventListener("click", yesButtonFunction);
noButton.addEventListener("click", noButtonFunction);

function deleteButtonFunction() {
  deleteButton.classList.add("active");
}

function yesButtonFunction() {
  alert("yes");
  deleteButton.classList.remove("active");
}

function noButtonFunction() {
  alert("no");
  deleteButton.classList.remove("active");
}
.form-anim-right-click {
  position: relative;
  overflow: hidden;
}
.form-anim-right-click > .form-group {
  width: 200%;
}
.form-anim-right-click > .form-group > .btn {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn.active {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn.active + .form-slide {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click .form-slide {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click .form-slide > .row {
  margin-left: 0;
  margin-right: 0;
  padding: 0 4px;
}
.form-anim-right-click .form-slide > .row > div {
  display: inline-block;
}
.form-anim-right-click .form-slide > .row >[class^="col-"] {
  padding: 0 2.66666667px;
}
.form-anim-right-click .form-slide > .row label {
  margin-bottom: 0;
  line-height: 1.6em;
  font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
  color: #01273c;
}
.form-anim-right-click .form-slide > .row .btn-xs {
  padding-left: 4px;
  padding-right: 4px;
  z-index: 10000;
}
<div class="form-anim-right-click">
  <div class="form-group">
    <button type="button" class="btn btn-xs btn-block btn-primary delete " id="delete">Delete</button>
    <div class="form-slide">
      <div class="row">
        <div>
          <button id="yes" type="button" class="btn btn-xs btn-block btn-primary">Yes</button>
        </div>
        <div>
          <button id="no" type="button" class="btn btn-xs btn-block btn-secondary">No</button>
        </div>
        <div>
          <input type="text">Text</div>
      </div>
    </div>
  </div>
</div>


Share : facebook icon twitter icon
Can't click on buttons after CSS transform

Can't click on buttons after CSS transform


By : Munch
Date : March 29 2020, 07:55 AM
Does that help You need to give the elements a non-static position. This is because the elements are not currently positioned in their parent, with the parent being moved forward it covers the children
code :
button {
    position: relative; /* Or absolute, fixed */
}
button {
    -webkit-transform: translateZ(200px); /* Equivalent or greater than parent's*/
    transform: translateZ(200px);
}
$("#buttonRight").click(function () {
    $('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(89.999deg)");
});
CSS transform on click using jQuery

CSS transform on click using jQuery


By : user2048054
Date : March 29 2020, 07:55 AM
may help you . If you can only use one element, you'll have to get the transformation matrix of the element before the second animation is initialized, remove the first animation, set the properties to the transformation matrix that you saved earlier, and then start the second animation. This is because one element cannot have more than one transform applied to it at one time.
The better option would be to apply the click's effects to the parent instead, because that will scale both the parent and the child. You can have a div that otherwise does nothing as the direct parent if you'd like to not affect the layout of the page by changing .divOuter
On click Javascript transform

On click Javascript transform


By : user3556845
Date : March 29 2020, 07:55 AM
should help you out I found this plugin. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/
Edited
How to change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id?

How to change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id?


By : Soujanya Lachyan
Date : March 29 2020, 07:55 AM
will be helpful for those in need How to change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id ? , Use WebkitTransform, MozTransform, OTransform, msTransform
code :
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
  function in_fn() {
    document.getElementById("test").style.transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.WebkitTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.MozTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.OTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.msTransform = "translate3d(0, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "out_fn()");
  }

  function out_fn() {
    document.getElementById("test").style.transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.WebkitTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.MozTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.OTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.msTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "in_fn()");
  }
</script>

<div id="test" style="width: 200px;height: 200px;background: #000;transform: translate3d(-239px, 0px, 0px);-webkit-transform: translate3d(-239px, 0px, 0px);">
</div>

<div id="menu-button" onclick="in_fn()">CLIKC HERE</div>
click on border button does trigger click when css transform:scale() is active

click on border button does trigger click when css transform:scale() is active


By : jivan
Date : March 29 2020, 07:55 AM
should help you out The problem is the div seems to lose the click event as the active button is now too small and therefore the click is no longer inside the button (try the larger button number but click in the bit that turns white and you will see it has the same problem).
code :
document.querySelectorAll("button").forEach((itm) => {
  itm.addEventListener("mousedown", function() {
    console.log("press"); // changed to console so you can see it fire in the snippet as well as the animation taking place (which wuldn't happen with an alert)
  });
})
button {
  cursor: pointer;
  user-select: none;
  outline: none;
  background-color: #c7ffff
}

button {
  border: 25px solid red;
  box-sizing: border-box;
}

#b1:active {
  transform: scale(0.4)
}

#b2:active {
  transform: scale(0.95)
}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
Related Posts Related Posts :
  • Resize images to fit display:flex divs
  • Three layers transparency
  • HTML side by side divs, while one has fixed width and the second one fits remaining space
  • DIV Stacking & Spacing Using CSS
  • How to make space between menu items in CSS/HTML
  • CSS display:flex equal parts
  • Image Caption Hover Animation in html or/and css
  • How can I create an alignment toward the top left corner?
  • Page is showing two scrollbars
  • Z-index issues - How to bring a child element onto the parent's below element?
  • Ingesting videos via bulk uploading into Azure media services from HTML5
  • border-radius with dropdown menu
  • Is there an HTML entity for an info icon?
  • Style two html form text area/inputs on same page differently
  • Bootstrap 3 Grid Layout not respecting blank "Margin" columns?
  • HTML tag with different attributes
  • CSS Clear depending on odd of even amount of items
  • Center div on wrapping (when it doesn't fit on the line)
  • How to remove blank space around SVG
  • Vertical Align Bootstrap Radio Button Image
  • Bootstrap HTML carriage return
  • CSS Checkbox Styling Behaving Differently on Other Pages
  • How to keep a link disable when it's still on the same page
  • Container div overlapping child horizontally
  • How to set both a background colour and a different text color on the same element
  • How to vertically & horizontally center children elements in a fluid layout set by media queries?
  • Layer responsive images on top of each other with Bootstrap
  • Is there a way to hide html inside curly braces in an ASP.NET MVC Razor html helper?
  • Show variable content in bootstrap tooltip
  • How to reference to WIN32 object under MS Windows 7 64bit in VBScript
  • Center inline-block list
  • Background image isn't showing up. Why?
  • CSS Button Animation - How to Accomplish?
  • How to find out which favicon a browser actually uses
  • CSS Media Queries Overriding Each other
  • Cycle2 Carousel not working when it's in a DIV
  • HTML to landscape MS Word
  • Reduce the background simultaneously as site reduction - Bootstrap
  • How to set vertical align of elements that exist into a div tag to center with css?
  • I'm resizing an image while scrolling in my website, but i cant figure how to make an animation for the resizing
  • How to style up a hr tag
  • vertical scrolling blocked by Hammer.js
  • Site layout breaks on mobile view
  • I'm missing something in my Head to make the site responsive
  • Fluid/fixed design with sidebar composed of two items
  • Squeeze a div between two other divs when window resizes
  • Short form for expression <label>
  • Align :before with text both with same height
  • Handlebars not populating data after first space in input field
  • CSS3 sprite animation for different size
  • Css not working(rendering) in chrome/firefox but works in IE10/Edge
  • Centering bootstrap responsive columns
  • Basic CSS floating elements behavior
  • Trigger HTML event with VBA
  • Custom Skin: How to get Languages into MediaWiki Sidebar?
  • URL pathway is wrong
  • How to set align of elements to center with css?
  • Bootstrap : vertical align and jumbotron height
  • Relative vs Absolute in CSS
  • Flexbox Grid Container
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co