Cross-browser transition and transform issues - javascript

I'm having issues while building my new website.
I have a mobile nav that shows up whenever your browser is small enough (I believe under 940px wide) and it works fine on Chrome and other webkit browsers, but in Firefox and IE the transitions don't work and nothing transforms the way I want it to. I'm not really sure why this is and could use help.
Here's a link to the site: http://teamreest.com/
EDIT: I am using the specific vendor prefixes, yet it still does not work.
More specifically relating to this:
.overlay{
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: $main-color;
overflow: auto;
z-index:100;
font-size:50px;
font-weight:300;
min-height:400px;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.overlay.show {
opacity:1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
Also this:
.container{
height:100%;
opacity: 1;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
}
.container.show {
opacity: 0.5;
-webkit-transform: translateX(30%);
-moz-transform: translateX(30%);
-ms-transform: translateX(30%);
transform: translateX(30%);
}


I found the issue in my code.
The transition as seen here:
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
And here:
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
Are problematic. As seen, the regular transition property has an issue.
That issue can be seen as there is a dash in front of the transform property of the transition. By removing this the problem is solved.

Related

change specific element while having the same class to multiple elements

I have an image gallery. I want to change 'margin-top' to 50px for every '.item' element that has less than 140px of height(for responsive design purpose). this is what i have so far.
what should I write in between the curly brackets in order for this to work?
please reffer to the javascript code.
var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
.item {
cursor: pointer;
max-height: 150px;
min-height:120px;
position: relative;
overflow: hidden;
top:0;
left:0;
}
.item img {
position: absolute;
right:0;
padding:0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.item {
position: absolute;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.item:hover { opacity: 1; }
.item .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
text-align:center;
}
.item {
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.item:hover,
.item:focus {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}
.item:hover .tagline,
.item:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
<div class="item " data-w="160" data-h="100"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
<div class="tagline overtext"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;">etet
</div>
</div>
</div>

CSS3 transition & transform is not working well on class removal

I've made some nice hamburger effect which is pretty common these days over the websites in mobile navigation bar.
So when someone click the hamburger it turn the X perfectly (when adding a "open" class) but when the class removed the animation is changing weirdly, please watch the effect at the following code:
HTML:
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
CSS:
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-o-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#hamburger span:nth-child(3) {
top: 14px;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
}
Javascript:
$(document).ready(function () {
$('#hamburger').click(function () {
$(this).toggleClass('open');
});
});
https://jsfiddle.net/phhkL4bu/4/
Can you please help me out?

You can correct the removal animation by doing the following:
Set the forward transition's setting within the .open selector. When the .open class is added, the opacity of second child is transitioned for a duration of 0.3s without any delay. At the same time, the top position of the other 2 children is also being transitioned. Then after a 0.3s delay, the transform of the 1st and 3rd children is transitioned. This gives the effect of the top and the bottom bar moving down and then rotating.
Set its exact reverse as transition setting in the default selector. That is,make the transform on the 1st and 3rd child transition immediately with a 0.3s duration while the top of these two children and the opacity of the 2nd child are transitioned after a delay of 0.3s. This setting will apply when the element loses the .open class and so,will produce the reverse effect.
$(document).ready(function() {
$('#hamburger').click(function() {
$(this).toggleClass('open');
});
});
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
}
#hamburger span:nth-child(3) {
top: 14px;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(2) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

mozilla css transform property dosn't work

I am building an overlay with simple transform mocking slide-down effect. I works fine in Chrome and Safari, but it doesn't work in Firefox and i don't know why.
Here is my css:
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($off-canvas-bg, 0.95);
z-index: 99;
overflow: auto;
}
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
and html:
<div class="overlay overlay-slidedown">
</div>
I am adding open class with javascript:
toggleMenu: function ( ) {
var overlay = this.$('.overlay');
if( overlay && overlay.hasClass('open') ) {
overlay.removeClass('open')
}
else if(overlay){
overlay.addClass('open')
}
},

Try adding this to .overlay
transform-style: preserve-3d;
Quite often when FF transforms are not right, this is missing from the appropriate element. Webkit builds seem not to require this to establish the required stacking contexts, but Chrome/Safari suffer funny effects with the z-index on adjacent sibling elements in such cases.

using an onClick event to trigger a CSS3 transition

I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!

Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.

Image spin when hover over text

Right, I have a div with text in it, When I hover over the text it fades to red and has a margin left of 4px, It also has a image of a star next to it, what I want to achieve is to make the star spin when the text is hovered over but still have it turn red and have a margin left of 4px, any ideas?

Fiddle: http://jsfiddle.net/vPAcF/
CSS:
span.red:hover {
color:#C42626;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}
span.red:hover .star {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-0-transform: rotate(45deg);
transform: rotate(45deg);
}
.star {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transform: rotate(0deg);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.star:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
span.red {
color:#CCC;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}

Categories

Resources