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>
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.
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
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.
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview