I am trying to animate a drilldown menu, so that when the user clicks on one option, the sub-options expand in an animated way, and when the main option is clicked again, the sub-options will collapse with an animation too. The drilldown menu itself works, but the animations are giving me trouble.
I currently have the "expand" animation working correctly. When sub-option elements are created, they are given the class "drill-expand", that links them to the following CSS:
.drill-expand {
animation:expand 1s;
-webkit-animation:expand 1s; /* Safari and Chrome */
}
and a corresponding #keyframes animation. When the main option is first clicked, the sub-options are created, and appear according to the drill-expand animation.
But the problem arises in collapsing the sub-options. When clicking the main option to collapse the sub-options, I cannot get the sub-options to follow an animation. Instead, the DOM elements are just destroyed (correct behavior for the drilldown menu, but not pretty - I want an animation). Is there a way to trigger the 'collapse' animation, right before the DOM elements are destroyed?
I am working with AngularJS 1.1.4, if that can be useful.
Thanks!
Related
I'm implementing a screenshotting app that captures a portion of the screen. I'm currently:
listening for a keyboard shortcut
drawing a transparent view on top of the entire screen
having the user click and drag to select an area inside of that view
screenshotting the coordinates inside of that bounding area.
Here's an example of what it looks like (the transparent view is tinted blue):
This works, but it causes the mouse to stop focusing on whatever it was previously focusing on. In other words, if I'm hovering over a tooltip and I hit the screenshot shortcut, the tooltip vanishes before I have a chance to screenshot it.
It looks like macOS's own screenshot command does not have this problem. If I hover over a date in StackOverflow in order to see the time tooltip, I can press Cmd+Shift+4 and screenshot it pretty easily:
If I try and do the same thing with my own code, the tooltip vanishes after I render my transparent view, even if I haven't moved my mouse.
Is Apple doing something specific to maintain the focus state of the mouse that I could be doing? Alternatively, should I somehow take advantage of Apple's own screenshotting flow myself inside of this app? If it helps, I'm currently using CGWindowListCreateImage to actually take the screenshot.
Is it possible to edit a group of animation transitions at once? When I select several animation transitions (as in the screenshot below) and change some properties in the Inspector (such as Transition Duration), the changes don't seem to take effect. The properties look like they change, but when I click elsewhere in the Editor and then click back on the transition, the property still has its old value.
No. Multi-editing for animation transitions isn't supported.
Source: https://issuetracker.unity3d.com/issues/transition-editing-multiple-transitions-cannot-be-edited
I have an application which contains generated code for ion-nav-view. When I remove the code, the entire app disappears. I want to get rid of the arrows generated by ion-nav-view. Is there a way to do this without throwing away the entire app? I just want a view without the extra nav buttons.
The answer is that a button bar child element which was an href styled as a button, i.e.
<a href="/page1" class="button">
was being parsed and displayed into the topmost and bottom most region as part of the ion-nav-bar. The solution, in my case was to remove the anchor styled as a button in another part of the app, and the phantom objects at top of page and bottom of page go away.
I'm not sure what that magic logic was supposed to achieve, but I'm not a fan.
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called
I am developing an IPhone cocos2d app with a scene like the the one depicted in the following image (I hope you can see that):
On the right there is a vertically scrollable menu contained in a separated layer (menulayer) which is itself contained in the main scene's layer. On the left there is a back button contained in the main scene's layer.
I am trying to exploit the UIScrollView as described in this link. However, despite I can see the UIScrollView working I am experimenting some problems:
1) while the menulayer actually scrolls it seems the menu does not. In fact when a press the menu item 8 the menu item 4 is selected, when I press the menu item 7 the menu item 3 is selected and so on.
2) the back button only works when the menulayer is at its first position
Do you have any idea of how shall I do to fix it?
You need to check you selectors. calls selectors from proper controls. check it carefully.Your problem shows your menu item 8 th selector bind with 4th same for others. some mis binding of selectors is present in your code so check them properly.