I'm new to AngularJS and I'm learning it independently.
I read about ng-if using the official AngularJS website.
I got an exercise which I need to scan a color, and if the color is white (#fff in hex), I should change the span's background-color to black (#000 in hex).
This is what I've tried JSbin.
I involved Javascript because I don't know how to deal with CSS on Angular and I think that's they reason why the code is not working as expected.
Sorry for being ignorant.
Thanks in advance.
You don't use inline JS (onclick) when you have ng-click (or at all, for that matter). I suggest you take a step back and make sure you understand what's going on, and not just put in random bits of code in hope they would give you what you want.
Here's an updated demo.
First, I removed the onClick. then I changed the function to be included in the scope as that's the only way things you put in things like ng-click can find those functions. Last, I changed added a backgroundColor variable to be set to the desired color when the button is clicked, and changed the style attribute of the output element to have a background-color rather than color like you had.
Also, I don't see how ng-if has anything to do with this.
Related
I'm working on some sort of 'continuous' animation. Say a div translates from its current location 200px to the right. There's an option to change the distance of translation. While its animating, the user changes from 200px to 400px. The div should still move smoothly until it reaches its final point which is 400px from its previous location. I have done the basic moving animation, however I can't figure out how to make it continues without jumping when the distance changes.
Here's the codesandbox that I'm working on which best illustrates my point above and what I'm struggling with. Any ideas or help would be greatly appreciated. Thanks :))
Edit: Steps to reproduce the jumping problem:
Open the sandbox
Click the 'Toggle' button
Click the 'Add distance' button
While the red div animates, click 'Add distance' button again
And you should see the div jumping
There is probably a way to fix your code so that it works as you want, though I would suggest going in another direction. There are several animation libraries in React that can help you solve this problem. The resulting code is also going to be more portable.
For your specific need, I would suggest using a library called react-move. It is part of the react-tools which provides other cool libraries. I created a CodeSandbox with my take on your problem using react-move.
I only took the transform line for your code, since I wanted to focus on how you could integrate the library into your example.
To create the animation, I imported a component from react-move called Animate. It's the main component of the library. You use this component to wrap a function using the function as child pattern. This function will receive a state object with information regarding the animated element. It also consumes a start, update, enter, and leave function, that represents the state for those actions.
Inside you function as child function is where you define the animation. In our case, we want to translate the Box along its x axis, using the x value provided on the state object.
OBS: On my example the Box returns to the start (x === 0) when its offset value is bigger than the window's width.
I hope it helps.
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
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!
i want to make a text, that changes in a loop, with a fade between the changes. I dont no javascript so im not able to make it on my own, i tried to google it with no luck. maybe im just search for the wrong thing but nothing pops up.
Heres a page where they use it right under the banner picture:http://www.spabad.dk
No using javascript means you want to do this in pure CSS. It could be difficult to get the exact result that you want, although you can find effects close to what you need : See here.
If you are ok with using javascript, this is what you're looking for (note that jquery was included, this is a javascript library that simplifies its use. You can easily include it in an html page by putting <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> in your <head>
Hope that helps!
Sources: Simple CSS Animation Loop – Fading In & Out "Loading" Text and
How to make this jQuery animation code loop forever?
I have built a HTML page which displays a quote of some person. I want to create an effect where author name fades in first, and then after a second fades in the quote.
I have achieved my goal, but I am having an issue. Everytime I set transition-delay on the quote element, the author element gets delayed as well. That makes that the author is faded in T+1s, and the quote in T+2s. In reality, it's not T+1s and T+2s, but more.
Here is the code that reproduces my problem: Plunker
When you click on "Toggle show" button, then the quote appears. You can notice, that the text fades in after a few seconds. However, if you delete .quote-text from CSS, you will notice that the text fades in almost immediately.
My question is, why transition-delay set on class .quote-text affect transition that is set on class .quote-author? How can I eliminate that affection?
Thank you for your time
OK, I didn't want to answer this because I only have very basic idea on how AngularJS works. But I tried something that might help a bit. The downside is that I removed ng-animate and added ng-class, which doesn't satisfy your question. But I believe you can somehow substitute it with ng-animate, again, this is only to help and might give you some idea.
Check this Plunker
I only changed css and this two lines in html:
<h2 class="quote-author transition" ng-class="{'show-me': show}">Bill Nye</h2>
<span class="quote-text transition" ng-class="{'show-me': show}">“Everyone you ever meet knows something you don’t”</span>