.ez-active
&.ez-fixed-top-right
position: fixed
right: 0
top: 0
transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s
I want it to slide into the top right when it's clicked.. but for some reason it just teleports.
Update: your code seems to be fully functional. Remember that the transition should be set on the default state of your element, not on the 'active' state.
$(".clickable").click(function() {
$(this).toggleClass("ez-active");
})
.ez-fixed-top-right {
position: fixed;
right: 100px;
top: 100px;
transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s;
}
.ez-active .ez-fixed-top-right {
position: fixed;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable">
<div class="ez-fixed-top-right">
test
</div>
</div>
Edit: Turns out I'm wrong about the extra seconds. I'm leaving this here for now in case you are reading it, since the sample is functional. But we're going to need more of your code to figure out why it isn't working.
Related
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
I have a backdrop on my site that opens whenever it needs to. Modals, mobile nav etc.
I'd like to get the opacity of the backdrop to fade, however I can't get it to transition properly when the --open class is removed from the backdrop.
I've gone through a few iterations so any ideas on how to make it work AND be better css is appreciated.
Here's a demo demonstrating the ease effect occuring when --open is applied to the backdrop, but will not work when it is removed.
https://jsfiddle.net/p2yz0rvr/
For futures sake here's the code:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -9999999999;
opacity: 0;
text-align: center;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
background: #000;
transition: opacity 0.4s ease-out;
}
The problem is that you don't have a background set on the initial .backdrop state, the background is set on the element .backdrop--open.
Since you are only transitioning the opacity property, the transition doesn't occur when you remove the .backdrop--open class. Therefore you would need to move background to the initial .backdrop state in order for the transition to take place when removing the class.
Updated Example
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0;
text-align: center;
background: #000;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
transition: opacity 0.4s ease-out;
}
As an alternative, you could also keep your initial code and just transition the background property in addition to the opacity property (without having to change where the background is set).
Keep in mind that the z-index property can be transitioned, so depending on what you're trying to achieve you may only want to target those two properties rather than using all.
Updated Example
.backdrop {
/* ... */
transition: background 0.3s ease-in, opacity 0.3s ease-in;
}
.backdrop--open {
/* ... */
background: #000;
transition: background 0.4s ease-out, opacity 0.4s ease-out;
}
If a create some simple rules with a transition:
.foo {
opacity: 1;
position: absolute;
top: 0;
left: 0;
transition: opacity .3s ease;
}
.foo.is-hidden {
opacity: 0;
top: -9999;
left: -9999;
}
i am dynamically adding and removing the is-hidden class with js.
<div class="foo"> ----> <div class="foo is-hidden">
when i do this, I would like the opacity transition to happen before the absolute position flips it off the screen.
can this be done with just transition? or do i somehow leverage a keyframe animation? I have not done such a thing before?
You can use transition-delay in conjunction with transition:
.foo {
transition: opacity 1s ease, top 1s, left 1s;
transition-delay: 0s, 1s, 1s;
}
In my Fiddle, I set opacity to 0.5 so you can see the effect:
http://jsfiddle.net/5knxvkc0/
I’m trying to achieve some nice transition effects when hovering after a image.(a hover div to appear from the same direction as the mouse ).
Everything works fine except that the “hover in” transition is not in straight line but more like in a diagonal & fill kind of way.(in the example below the transition is from left: -378px; to left : 0px / top is 0).
Normal state:
<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>
Hover state (classes are removed and added via jQuery):
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
I want the movement to be in a straight line like the hover out transition which works fine. Can you point me the bug ?
This is the html & css code:
<div class="portfolio-sample regular-portfolio coding-2 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>
Thank you!
.hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}
.slideFromLeft {
top: 0px;
left: -378px;
}
.slideLeft {
left: 0px;
}
Answer :
OK i figure it out - it was because the initial_hover class was added after the slideFromLeft on hover. Once i reverse these it works as i expected
It is not linear because it is specified to be not linear. If you want a linear transition, you should change both ease-in-out and ease to linear in the styling for .hover_effect.
I'm using jQuery to show a success message after a form is submitted. The form is created using the wordpress plugin Contact Form 7. The class wpcf7-mail-sent-ok is added dynamically by the plugin ajax submission script. I'm trying to make it so that when the user clicks on the message, it fades out and then dissappears. For some reason though the removeClass method isn't working.
Can anyone see any reason why it shouldn't be working? The timeout function is definitely working as I tested it with an "alert()" call. Thanks for your help.
PS... i'm using LESS css so that explains the .opacity() syntax in the css posted here.
HTML:
<div class="wpcf7-response-output wpcf7-mail-sent-ok"><div class="image"></div></div>
Jquery + CSS
var $sent = $('.wpcf7-mail-sent-ok ');
function remove() {$sent.hide().removeClass('wpcf7-mail-sent-ok hide').removeAttr('style')}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(remove,400)
});
.wpcf7-response-output {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: transparent;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.wpcf7-response-output.wpcf7-mail-sent-ok {z-index: 1000; background-color: rgba(255,255,255,.7); .opacity(1)}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
height: 132px;
position: absolute;
margin: -66px 0 0 -200px;
background-size: 100% 100%;
background: url(assets/images/img-sent.png) no-repeat center center;
}
.wpcf7-mail-sent-ok.hide {.opacity(0); z-index: -1}
It doesn't work because at the point where you define the function remove, the value of $sent has already be determined to be a jQuery object that matches no elements. This is because the matching happens as soon as you write
var $sent = $('.wpcf7-mail-sent-ok ');
At this time there is no "mail sent" element present yet.
The easiest way to fix this is to re-evaluate the selector within remove:
function remove() {
$('.wpcf7-mail-sent-ok').hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
Another solution would be to just use this inside the click handler and pass it as a parameter to remove:
function remove(el) {
$(el).hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(function() { remove(this); },400)
});
Of course it's even better to just use jQuery's built-in delay and get rid of remove altogether:
$sent.live("click", function(){
$(this).addClass('hide')
.delay(400)
.hide(0) // need to pass 0 as a parameter
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
});
I don't see any code to fade out the element. The reason its not working is same as mentioned by #Jon. You can try to use anonymous funciton and indside this function this will point to the element on which click is trigger. Try this.
$('.wpcf7-mail-sent-ok ').live("click", function(){
var $this = $(this).addClass('hide');
setTimeout(function(){
$this
.hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style')
},400)
});