FAB button animation not working properly - css

I'm trying to animate a FAB button when it's clicked. I want it to open and fills up the screen - It's for a responsive webApp running in mobile devices.
The problem is: When I click to open the button, it gets the full width instantly and then animate up. And to close the button, it shorten instantly and then animate down.
The problem is I'm using a fixed position, so I don't know how to deal with it.
This is an code example:
html:
<div class="fab" ng-class="{'open': fabOpen}" ng-click="toggleFab()">
<span ng-show="!fabOpen">FAB</span>
<h4 ng-show="fabOpen">Just a test</h4>
</div>
scss:
$time: 400ms;
.fab {
-webkit-transition-duration: $time;
-moz-transition-duration: $time;
-o-transition-duration: $time;
transition-duration: $time;
border-radius:50%;
background:#358FE8;
display:inline-block;
height:80px;
line-height:80px;
width:80px;
position:fixed;
bottom:16px;
right:16px;
text-align:center;
cursor:pointer;
color:white;
&.open {
background:#fff;
color:black;
border:1px solid #eee;
border-radius:2px;
left: 16px;
width:auto;
height:90%;
}
}
And this is an live demo of the problem: http://jsfiddle.net/tfrxf0p5/

A workaround to fix the issue I had was to use a width:calc; and doesn't use the left property.
This way I can calculate the maximum width of the element based on the distance of the border. So, since I already have a position right of 16px I need to have a width of 100% minus 16px for each side.
Final code would be something like this:
&.open {
width:calc(100% - 32px);
/*left:16px;*/ //Doesn't need it
}

I can't fix the fiddle on my phone for some reason. you have transition-duration but you never set what to transition.

Related

perform an animation from the current position of the element at 10px on the right

I'm new to this topic of animations. Basically I want to move a div .son in your hover property. I would like this animation to start from its current position at 10px on the right. I am normally able to perform this animation by defining an initial position for "left" and an ending for "left" but in this case I want it to take the initial position in which it is and thus move 10px to the right.
<div class="father">
<div class="son">
</div>
</div>
.father{
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.son{
position:absolute;
width:100px;
height:100px;
border:1px solid red;
}
.son:hover {
-webkit-transition: all 0.5s ease;
-webkit-animation: fadein_1 0.2s ease-in;
}
#-webkit-keyframes fadein_1 {
from { opacity: 1;left:auto;z-index:2; }
to { opacity: 0; left:10px;z-index:3; }
}
this is my code:
https://jsfiddle.net/ze9vdLa3/it?
thanks
If you can use jQuery, check this :
https://jsfiddle.net/95agyjuo/
jQuery('.son').mouseover(function(){
jQuery(this).animate({
left : "+=10"
})
})
You can accomplish the desired animation using the CSS translateX() function. As #Joe Koker stated, this is more performant than animating the left property.
#-webkit-keyframes fadein_1 {
from {
opacity: 1;
transform: translateX(0px); //start from initial position
z-index:2;
}
to {
opacity: 0;
transform: translateX(10px); //move 10px
z-index:3;
}
}
Your question is a bit vague, but if what you want is to animate an element to the right, it's easy. You almost had it.
Some things:
It's not possible to animate from auto, so I had to change left:auto -> left: 0; (from { opacity: 1;left:0;z-index:2; })
-webkit- isn't necessary
It's not possible to animate z-index either
Here is a working fiddle: https://jsfiddle.net/oqdn6xLg/1/
Though for this use case, I would recommend using the transition property instead, as its simpler. Check out the difference here: https://jsfiddle.net/L04xhgpr/
Note that transform: translateX() performs better, as others have already said :)

How to disable CSS3 transitions when zooming?

When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.
Is there a way to use these transitions, but prevent the browser from using them only when zooming?
EDIT:
Sample HTML:
<div></div>
Sample CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
Code also available on jsFiddle.
I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.
It can't handle zooming initiated by using the menu, but its better than nothing.
HTML
<div></div>
CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
.zooming {
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
jQuery:
$(document)
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }})
.keyup(function(e) { $('div').removeClass('zooming'); });
Updated jsFiddle. Only tested in Chrome so far.
Try this solution:
http://jsfiddle.net/995zE/
It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.
This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});

text over a border in css3

I'm curious. It's more for fun and tips but do you know if I can deal with a property to position the text in the middle.
I have post code on JS bin (refresh if CSS don't open) : http://jsbin.com/3/uhumok/edit?html,css,live
HTML :
<a class="one" href="#">Hi !</a>
CSS :
a {
display:block;
color:white;
text-decoration:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
text-align:center;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
border-width:50px;
border-color:rgba(0,0,0,1);
-webkit-transition:0.2s ease;
-moz-transition:0.2s ease;
-ms-transition:0.2s ease;
-o-transition:0.2s ease;
transition:0.2s ease;
}
a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
a.one {border-style:solid;}
I think this is impossible without :after or :before.
Can't you add another tag inside the <a>? If so, you can absolute position this inner tag to achieve that: http://jsbin.com/3/uhumok/6/edit?html,css,live.
if you make the color:#000 and add padding-top:50px to :hover, the text will almost stay in the same place. i didn't save the example because i didn't see a save option. if you used :before/:after the text would be absolutely positioned so idk why you don't want to use them;

Why only chrome (and maybe safari) works good with transition (height,width)?

I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.

Animate line-through text with CSS

Is it possible to use Webkit animations/transitions to animate a strikethrough line going through a word from left to right? As far as I can tell, I can only make it fade in/out, not animate it striking the text out.
Any help would be appreciated. Thanks.
This works.. (I used hover, not sure what event you want it to trigger)
html:
<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>​
css:
span.line_wrap {
position:relative;
display:inline-block;
}
span.line {
display:inline-block;
position:absolute;
left:0;
top:50%;
width:0;
border-top:1px solid grey;
-webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
width:100%;
}​
fiddle:
http://jsfiddle.net/bendog/LXKJU/
EDIT: This is really just to illustrate it's possible... makes horrible markup though. I wouldn't advise you to use it...
EDIT 2: Or triggered with Javascript: http://jsfiddle.net/bendog/Kdd7K/

Resources