I have a number of collapse directives in an app and i'd like to be able to individually switch their animation on and off (to 'force' them open or closed), depending on specific state. I've looked at the source and can't see where i'd be able to hook into the directive to achieve this. Or am i missing something obvious?
The only solution i can see at the moment, is duplicating the whole directive and modifying the link function to allow for a second attribute to be watched that would determine if animation is used or not.
AFAIK, the angular animation is based on CSS transition, so you could disable animations by add some CSS properties to the element.
May be define a noanimate class like this:
.noanimate {
transition: none !important;
}
then you could add/remove the noanimate class to the element when you want to disable/enable the animation.
Hope this helps.
Related
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
I'm trying to prevent my carousel from stopping when the mouse is over the slides. I've tried to add pause=false in the uib-carousel directive as I have read somewhere else however that doesn't work. I'm also inspecting the element but can't really find where can I set that option (if that's possible).
I have also seen people adding to the .carousel class the pause=false and then I tried to add to add the CSS without success as well.
Any ideas?
I would first confirm ngAnimate is not interfering with the carousel in any way. To accomplish this, simply follow the instructions in this post: ngAnimate breaks existing ui.bootstrap.carousel
I've just checked https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js and looks like there is an attribute for that directive called "no-pause". I will give that a go!
Is there a way to remove the :hover from a css inline in angular without removing the whole class?
Like the following removes the whole class:
ng-class="{'option-selected' : option.chosen}"
But say option-selected had a option-selected:hover
Is there a way to remove :hover inline within the ng-class?
Attach the hover to another class that you can toggle.
Somethign like
ng-class="{'option-selected': option.chosen, 'option-hover': option.hover }
Then in your css for when setting up the hover you would have
.option-selected.option-hover:hover{
...
}
That way, the only way the hover will work is if both classes are on it.
Besides that, no there is no way to get around the hover from css unless you start dropping in !important's everywhere.
I am working on a responsive website. My site uses Bootstrap 3.1 and AngularJS. Bootstrap has a class called "visible-xs". This class basically says let something be visible on small screens and hidden on larger screens. It does this by changing the CSS display property value between none and block. Currently, I have a div that looks like the following:
<span id="smallContent" class="visible-xs">Mobile Content</span>
I need to do some stuff programmatically in my controller when smallContent changes from visible to hidden and vice-versa. My question is, how do I watch for changes on the display property of smallContent? I've noticed the $watch method on the scope (http://docs.angularjs.org/api/ng/type/$rootScope.Scope). However, this seems to watch for changes to a property in the scope, not for changes to a property in the DOM.
Is there a way to do what I'm trying? If so, how?
Thank you!
You don't need javascript watchers to do what you want. You can, but it would be kind of hacky and potentially bad on performance.
Another point is that "responsiveness" should be handled (a maximum) by HTML/CSS only. If you start having JS different for each resolutions, it's no good.
What you could do :
<span id="smallContent" class="visible-xs">Mobile Content</span>
<span id="smallContent" class="hidden-xs">Not Mobile Content</span>
Keep in mind that you can also simulate media-query in JS with Modernizr :
if (Modernizr.mq('only all and (min-width: 768px)') ) {
}
That can be usefull (you can alos add this to a watcher but, well my answer was primarily CSS-based and you should stick to CSS solutions when possible)
Here's a simple Plunkr that animates the insertion of items in a list. This uses -webkit-transform to scale insertions from scale(0) to scale(1). Switching the ng-animate="'insert'" to ng-animate="'fader'" will use Javascript animation to insert the items.
But: I'd like to be able to use CSS keyframe animation here instead. The last entry in the list is hard-coded and uses the "float-enter-start" class. I cannot seem to make ng-animate apply this class correctly. It seems like setting ng-animate="''float" should work, but it doesn't. What am I missing?
The reason why your CSS animation code isn't working is because it's using CSS3-Animations and not transitions. Right now AngularJS ngAnimate does not yet support detecting CSS animation- properties (only transition). There is a request to get this fixed this week and it I plan on doing it between Monday and Friday of this week coming up.
In the meantime if you wish to still support this then you can get this to work using a JavaScript animation with nothing inside the function body. All you do is call the done() method after XXXX milliseconds of your CSS animation. Then in your CSS code (since ngAnimate still adds the CSS classes to the element) you can use the same CSS animation code, but just use that total duration inside of the function body inside of a set timeout.
Here's the code for that. Just include your CSS code from before to do the actual animation.
https://gist.github.com/matsko/5426873