I'm trying to basically replicate the Starbucks mobile navigation but I can't figure out how to get their smooth slide transition when you click the three lines. It looks like they're using CSS3 transitions to achieve this animation but I can't replicate it.
I've got the same result but without it animating because CSS3 does not animate display: inherit.
Here is my JSFiddle, can anyone improve it with a CSS3 cubic bezier transition like Starbucks.com is using on their mob navigation? (you'll have to resize your window to see their mob nav obviously)
p.s. this needs to be CSS3, no jQuery animation please :-)
http://jsfiddle.net/zQxNd/2/
Best approach I've encountered is to set the default style of the hidden menu to:
display:block;
overflow:hidden;
height:0;
then in your .open set the height of the element:
height: 200px;
I edited your fiddle to show: http://jsfiddle.net/zQxNd/3/
Also, it's probably best to write a quick jQuery function to set the height of through jQuery -- it's not ideal, but it's the best solution I've found with the tools we have.
EDIT: and for getting the exact speed of the animation, you can play with this awesome little app: http://cubic-bezier.com/
Once you get the timing down, you can replace your ease-in in the transition declaration with something like this:
transition: all 1s cubic-bezier(.17,.67,.83,.67)
Related
I have two divs one on top of the other.
The top div is revealed with ngAnimate and pushes the second div down.
I want to use a translateY animation to reveal the top div because it looks good.
#keyframes enter_not_smooth {
from {transform: translateY(-100px);} to {transform: translateX(0px);}
}
#keyframes leave_not_smooth {
from {transform: translateY(0px);} to {transform: translateY(-100px);}
}
Problem: The bottom div does not move smoothly as the top div is revealed, it instead jumps to it's final position.
If I use a height animation to reveal the top div the bottom div moves smoothly as the top div is revealed.
#keyframes enter_smooth {
from {height: 0px;} to {height: 100px;}
}
#keyframes leave_smooth {
from {height: 100px;} to {height: 0px;}
}
Please see this jsfiddle if you need clarification https://jsfiddle.net/9bz4Lwxa/105/
Question: Is there any way I can achieve a smooth animation using the translateY property or another property that will achieve a similar reveal animation where the top div does not grow in height but is full sized and just pushes the bottom div out of the way?
Thank You.
This is a tough one and something I've spent hours and hours and hours trying to accomplish. The only working solution I've come up with is really complicated and not worth all the extra code.
The problem is that when you use transform to animate an element, its bounding box remains static (seemingly behind the DOM scenes) and will not animate as to not affect any sibling elements. For reference, I'd read up on: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
As an alternative to animating height/width/etc (because it causes repaints/reflows in the browser) I've resorted to using transform animations that simply feel better given the predicament.
I've created an example based on your fiddle here:
https://jsfiddle.net/tommywhitehead/5q6wec92/1/
Note: It looks like you might be injecting ngAnimate in a non-traditional way so it's not reading the transition timing function (what places .ng-enter and .ng-enter-active at the right times) but I think this should give you the right idea.
I hope the big vendors can fix this somehow because this has been a huge issue for many devs.
Hope that helps!
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small
Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.
.list .item-accordion {
-webkit-transition:0.09s all linear ;
transition: 0.09s all linear;
}
This is the animation I am using.
The demo of the code is over here:
http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview
I have had similar issues when having to meet complex animation requirements. I have used greensock for more complex animations but that doesn't seem to be needed here. The general concept is that you are going to want to animate something but change/alter the properties before and after the animation has completed. You are going to have to be using a few callback promises to run additional animation after the first part of the animation has completed or do some manual calculations and adjust properties before starting or ending.
Angular Animate
Ionic Animate
It seems like ionic is allowing for onStart and onEnd callbacks. I would hide or force certain properties onStart and reset them onEnd so that you can get around what you are trying to work with. If you are not wanting to work with a fixed width or height you are going to have to grab window/screen size and so some basic calculations based on that. So you would get your window size set the size based on the window for the animation then reset back to auto when completed.
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)