JQuery UI `Slide` Transition Issues With CSS `transform - javascript

When executing JQueryUI's slide transition on an element with a CSS transform the top half of the element is being hidden during the animation. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?
JSFiddle: I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/
To accomplish the vertical centering, I do the following:
<style>
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
</style>
The top and transform within the CSS allow the banner to fall into the center.
To perform the animation, I execute the following:
$('#banner-welcome').toggle(
'slide',
function()
{
document.location.href = "#/" + destination;
}
);
When the animation starts the top half of the #welcome-banner disappears, and the bottom half animates. I've removed the transform from the CSS and everything works great -- except that my banner is no longer centered.
I am performing the vertical centering this way due to a combination of AngularJS and ng-views. I had previously used JavaScript to center the element, but adding the logic to the $(window).resize() event caused problems in other ng-views. I needed a way to isolate this to the specific ng-view.
Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear?

toggle is removed as of 1.9: http://api.jquery.com/toggle-event/
so please use animate or slideDown or slideUp method
also the transform property doesn't need prefixes
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
have you tried adding transform-origin property
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform-origin: 50% 50% 0;
transform: translateY(-50%);
}
im not seeing the top part disappear in latest Firefox 24

Related

When two elements use transform to move at the same time, why there is a gap in the middle?

Here is my bug demo:
https://jsbin.com/gijabuseca/edit?html,css,js,output
bug img
Is it a browser bug?
I solved this problem by replacing transform: translateX (100%) with left: 100%
However, using left to change the position performance is much lower than transform. If insist on using transform, is there a way to solve this gap problem?
A hack around this bug can be changing slightly the movement of div 1.
Offsetting a litle bit the timing function from what the standard ease value is, we adjust it closer to div2.
I have set the transition slower so that it is easier to see if it fails
setTimeout(function(){
document.querySelector('.demo1').classList.add('right');
document.querySelector('.demo2').classList.add('right');
});
body {
background: green;
}
.wrapper {
position: relative;
width: 100px;
}
.demo1, .demo2 {
position: absolute;
width: 100%;
height: 100px;
background: #ddd;
transition: 4s;
}
.demo1 {
transform: translateX(0);
transition-timing-function: cubic-bezier(.23, 0.12, .25, 1.05);
}
.demo2 {
transform: translateX(100%);
}
.demo1.right {
transform: translateX(100%)
}
.demo2.right {
transform: translateX(200%);
}
<div class="wrapper">
<div class="demo1"></div>
<div class="demo2"></div>
</div>

CSS Change X position of text tag

I have the following text tag which i cannot change. I want the "test" text to be centered using CSS only.
<text
width="13.89"
height="13.89"
x="291.46999999999997"
y="156.55"
transform="rotate(0,277.78,142.86)"
text-anchor="end"
style="fill: rgb(255, 0, 0); font-size: 5pt; display:inline-block; position: relative; top: 50%; left: 50%; transform: translate(50%, -50%);"
>
test
</text>
Via a javascript function the text gets an x and y on the bottom right center of a rectangle.
I'd like to move this to the middle center of that rectangle, The only thing we can control is the CSS, seeing as every rectangle is the same size i believe something like left -15px and top -15px should do the trick.
Is there any way to achieve this using CSS only?
I won't comment on how the text tag doesn't exist.
If you want to move it, you need to display it as inline block, in a relative position.
text {
display: inline-block:
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
inline-block to take only the needed space
relative to allow the element's placement
50% to put the top-left corner of the container at the center of the parent
translate(-50%, -50%) to put the container at the center of the parent
To reposition a <text> element within an <svg> with hardcoded x and y properties, using CSS, you can use transform: translate to offset the element from its hardcoded x,y position.
Examples
/* move 10px left */
.textElementSelector {
transform: translateX(-10px);
}
/* move 5px down */
.textElementSelector {
transform: translateY(5px);
}
/* move 10px up and right */
.textElementSelector {
transform: translate(10px, -10px);
}

Responsive menu design on click

I am looking to make a Responsive menu which will have a Menu button for small screen and on click menu show slide down and menu button will change to X
Something like as show in image below
I am trying to do same but got on codepen http://codepen.io/anon/pen/jbaXEq
Not sure how to change Menu Button in to X and back to normal on toggle. Button is not also aligned with logo.
Any help or pointer to make it look professional.
UPDATE:
I have done made it so far http://codepen.io/anon/pen/EVbGbR?editors=110
I've updated your codepen:
http://codepen.io/anon/pen/NGwegr
Just use css to transform your button to X and back:
.menu-btn-w {
width: 40px;
height: 40px;
position: relative;
float: right;
left: 0;
bottom: 0;
}
/* these styles are used for the mb lines, when your button has the class transform-mb*/
.menu-btn-w.transform-mb .mb-1 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(4deg);
transform: rotate(45deg);
}
.menu-btn-w.transform-mb .mb-2 {
display: none; /* hide the second line with css */
}
.menu-btn-w.transform-mb .mb-3 {
margin-top: -10px; /* pull the third line up to make a correct X */
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-4deg);
transform: rotate(-45deg);
}
now toggle this class transform-mb on click:
$('.menu-btn-w').click(
function() {
$('.mobile-menu-w').toggle();
$(this).toggleClass("transform-mb");
}
);

Animating a div on hover css - possible loop

Wordpress site using Bootstrap framework
.test {
position: absolute;
z-index: 9;
left: 50%;
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.linkage:hover + .test {
opacity: 1;
}
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test"> Test </div>
</div>
</div>
Right now my site has the div 'test' show up (opacity 1) vertically/horiz centred when the the link 'linkage' is hovered on (linkage is 100% height and width of the container).
I want to animate the 'test' div as it fades in on hover. I was thinking using scale (on hover the div scales down to its original size then scales up on fade out) or something. Unless anyone has a cooler idea
It seems like you are looking for something like the below snippet (a transition and not animation). On hover of the link, the .test is being scaled up two times its original size both along X and Y axes and on mouse out it is brought back to its normal size.
.test {
position: absolute;
z-index: 9;
left: 50%;
top: 50%; /* added as I think this was missed in your code */
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
background: url(http://lorempixel.com/500/500); /* added for image */
opacity: 0;
transition: all 0.5s ease; /* modified to transition all property changes */
/* added to scale up the div with the center as the origin */
transform-origin: 50% 50%;
transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
opacity: 1;
transform: translateY(-50%) scaleX(1) scaleY(1); /* bring back to normal state */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test">Test</div>
</div>
</div>
Alternately, you could use matrix transforms also. Equivalent of translateY(-50%) scaleX(2) scaleY(2) would be matrix(2, 0, 0, 2, 0, -101) and that of translateY(-50%) scaleX(1) scaleY(1) would be matrix(1, 0, 0, 1, 0, -101).
Well this will never be true:
.linkage:hover + .test {
opacity: 1;
}
as linkage (hovered or not) is not a sibling of test.
.test is absolutely positioned, but has no parent element that is not static. Did you want to to be absolute to the body? You use left/margin to horizontally center, and it looks like you are trying to use translateY to vertically center, but you never specify top. Perhaps consolidating to one method?
top:50%; left:50%; transform: translateX(-50%) translateY(-50%);

Display bug when zoom out in google chrome

I have problem with zooming on my webpage. I have bind on mouse wheel, to do dynamic zooming with mouse. Main element with background is about 4000px. Here is screenshot, how it looks like:
When I want to zoom out, to see a whole element, everything is messed (context menu dissapear, background-image is lost...). Here is screenshot on zoom out:
Thats is CSS on actual element:
element.style {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) translate3d(3145px, 1463.6364px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(5) scaleY(5) scaleZ(1);
width: 1437.5561545372866px;
height: 800px;
cursor: inherit;
}
.bg-slide {
background-color: transparent!important;
background-image: none!important;
z-index: -2;
border: 0!important;
}
It must be chrome issue, but I don't know where, because it works well in firefox, screenshot from ff:

Categories