I have a page with an element that has an animation on hide/show. The page loads when the element is not shown but still, when the page loads it shows the hide animation.
I've even tried to change the condition to ng-show="false" and still I see the hide animation when page loads.I've understood that there was an old problem with angularjs about this but I'm using 1.2.2.
HTML:
<div class="c_redDiv" ng-show="state == true">
<div ...>
<button ...>
<div ... />
</button>
<button ...>
<div ... />
</button>
</div>
</div>
CSS:
.c_redDiv.ng-hide-add, .c_redDiv.ng-hide-remove {
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
display: block !important;
}
.c_redDiv.ng-hide-add.ng-hide-add-active,
.c_redDiv.ng-hide-remove {
opacity: 1;
top: -50px;
}
.c_redDiv.ng-hide-add,
.c_redDiv.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
top: 0px
}
you should add to your css:
.c_redDiv{
display:none;
}
.c_redDiv.ng-show{
display:block;
}
I was unable to find a way to avoid the initial animation triggering when ng-hide or ng-show is used, but was able to get it working with ng-if.
HTML:
<div class="c_redDiv" ng-if="state == true">
...
</div>
SASS:
.c_redDiv {
overflow: hidden;
transition: max-height 0.35s ease;
&.ng-leave, &.ng-enter.ng-enter-active {
max-height: 300px;
}
&.ng-leave.ng-leave-active, &.ng-enter {
max-height: 0;
}
}
Related
For some reason the hover is not working in my font tag on firefox, it works normal on chrome, but doens't work in firefox. If i try to hover another tag (button and div for example) it just works as intended. I'm using firefox 64.0
Here's a example in codepen: https://codepen.io/luansergiomattos/pen/MZoMPX
<body>
<div class="header__account">
<button class="header__font">
<font class="header__font">LOGIN</font>
</button>
<button>
<font class="header__font">REGISTER</font>
</button>
</div>
</body>
css
.header__font:hover {
animation: 0.5s ease-out 0s 1 forwards highlight;
}
.header__font::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -7px;
background: red;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: 0.25s linear;
}
.header__font:hover::before {
visibility: visible;
transform: scaleX(1);
}
.header__font:focus::before {
visibility: visible;
transform: scaleX(1);
}
}
Sorry if there is a lot of stuff in my code, i just copied from the project i'm working
How do i fix this?
This might help you...
div.header__font:hover {
animation: 0.5s ease-out 0s forwards highlight;
}
According to here the font tag is not supported by HTML5,
I suggest you have to change your code.
However, I find the following coding is working.
<div class="header__account">
<button class="header__font">
LOGIN
</button>
<button class="header__font">
REGISTER
</button>
</div>
The problem I'm facing is:
I have a animated text which goes from right to left, this text change depending on the languague set, what is causing that the total width of the text changes too.
In this picture, the effect I want is working fine, because some properties are fixed.
Now, when I change for a longer text the problem cames up.
So, this is what I have now:
And this is what I'd like to have:
Here is the code I'm using:
ReactJS Side:
constructor(props) {
super(props);
this.state = {
checked: false
}
}
componentDidMount() {
window.addEventListener('scroll', () => {
if (event.srcElement.body.scrollTop >= 1400) {
this.setState({ checked: true });
}
});
}
render() {
return (
<div>
... stuff
<span style={{ fontSize: "40px", color: this.state.theme.COLOR_3 }}>
<input type="checkbox" id="Resume-chk" style={{ display: "none" }} checked={this.state.checked} />
<b id="Resume-title">{this.state.languageSet.RESUME}</b>
</span>
... more stuff
<div>
);
}
CSS Side:
//This is the text
#Resume-title {
display: inline-block;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
transition: color 200ms ease-in;
-webkit-transition: right 500ms ease-in;
-moz-transition: right 500ms ease-in;
transition: right 500ms ease-in;
position: relative;
right: -40.5%;
}
//This is the text when the checkbox is checked
#Resume-chk:checked ~ #Resume-title {
right: 40.5%;
}
So, the question is: How to fix it? Or maybe there is some concept I'm missing and it is a little bit more than just fixing a bug.
Also I'm not sure if doing things like right: -40.5%; and right: 40.5%; is a good practice, but I cant find a way to animate property like float or align.
Of course, if there is a way to fix it, but also there is a way to do it even better, It is also welcome!!!
EDITED: here the fiddle containing the whole html section, copied from dev console
You need a combination of positioning with right and a transform.
This is an usual idea for centering an element, adapted to your request:
.container {
width: 300px;
background-color: lime;
margin: 10px;
position: relative;
}
.item {
display: inline-block;
position: relative;
right: -100%;
transform: translateX(-100%);
transition: right 1s, transform 1s;
}
.container:hover .item {
right: 0%;
transform: translateX(0%);
}
<div class="container">
<div class="item">Item</div>
</div>
<div class="container">
<div class="item">Item long</div>
</div><div class="container">
<div class="item">Item longer longer</div>
</div>
I seem to have a problem with an animation combined with angular.
I have the following div in my html:
<div class="show-hide" ng-show="questionOfType === '1'">...</div>
and I have the following css:
.show-hide {
-webkit-transition:all linear 2s;
transition:all linear 2s;
}
so what I expected is once questionOfType will be set to 1 I will see the divs content appear with an animation, but It just appears regulary with no animation.
What am I doing wrong?
Thanks in advance.
Unfortunately, CSS transitions cannot animate between display: block and display: hidden, which is what ng-show is toggling.
Instead, you could animate the opacity between 0 and 1:
.show-hide {
-webkit-transition: opacity linear 2s;
transition: opacity linear 2s;
opacity: 0;
}
.show-hide.active {
opacity: 1;
}
And in the markup, toggle the active class I specified above using ng-class:
<div class="show-hide" ng-class="{'active': questionOfType === '1'}" ng-show="questionOfType === '1'">...</div>
You should load $animate as a module :
https://docs.angularjs.org/guide/animations
This is the example from their main page using css (and $animate)
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
$animate works in conjunction with your css
again an example from angular docs :
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}
So change to :
<div class="check-element show-hide" ng-show="questionOfType === '1'">....</div>
and have you a model to use to no whether to show or hide?
I have 2 images on top of each other, positioned absolute, in my example they are square but in my real project they are pngs with some transparency in the borders so the one in the back needs to be hidden until it appears on hover.
My problem is I need the transition to have some kind of delay so that the back pic appears a bit before the one on top so you don't see the background in between. I have made a fiddle to illustrate this:
http://jsfiddle.net/L21sk0oh/
You can clearly see the red from the background, that shouldn't happen. Also there is some weird moving going on, I haven't noticed this in my actual project.
Also my HTML:
<div class="product1">
<img class="active" src="http://lorempixel.com/400/200/sports" alt="">
<img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>
And my css:
body{
background: red;
}
.product1{
position: relative;
width: 400px;
height: 200px;
}
img{
position: absolute;
top:0;
left:0;
}
.product1 img.active{
transition: all 1s ease-in-out;
opacity: 1;
}
.product1 img.inactive{
transition: all 1s ease-in-out;
opacity: 0;
}
.product1:hover img.active{
opacity: 0;
}
.product1:hover img.inactive{
opacity: 1;
}
You could specify a value for the transition-delay property.
In this case, I added a 1s delay to the transition shorthand of .product1 img.active:
Updated Example
.product1 img.active {
transition: all 1s 1s ease-in-out;
opacity: 1;
}
The above is equivalent to:
.product1 img.active{
transition: all 1s ease-in-out;
transition-delay: 1s;
opacity: 1;
}
Make sure you're adding the transition shorthand properties in the correct order.
I cannot seem to animate ng-cloak. Essentially, I'm trying to animate a div from .containter.ng-cloak to .container.ng-binding
But it doesn't seem to workâAngular loads the div with container ng-binding classes straight away, ignoring the transition rule.
I even tried using transition-delay set to a couple seconds, no dice.
HTML
<div class="container ng-cloak" ng-controller="AppCtrl">
CSS
.container.ng-cloak,
.container.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.container.ng-binding {
opacity: 1;
}
Worth noting:
transitioning background-color from blue to red seemed to work as expected.
I omitted vendor-prefixes for the sake of brevity.
Thanks in advance.
A different approach:
http://jsfiddle.net/coma/UxcxP/2/
HTML
<section ng-app>
<div ng-class="{foo:true}"></div>
</section>
CSS
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.foo {
opacity: 1;
}
This will work like cloak since Angular won't set the foo class until is loaded.
The cloak won't work as you want because it'll be there (as a class, attribute, element...) until Angular replace it with the result of its templating process, so it isn't the same node and that's why it won't get the transition (a transition occurs when the same element changes), is not changing, is just not the same node.
Take a look at this:
http://jsfiddle.net/coma/UxcxP/5/
As you can see in that example, the div next to the one being "angularized" is getting the fade animation because it's the same div even before Angular taking place.
I realize there's been an accepted answer; however this is doable with the ng-cloak directive as originally attempted.
I use it to animate Jade generated markup. Your Mileage May Vary with Angular runtime-templated markup.
http://codepen.io/simshanith/pen/mqCad
HTML
<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">
CSS
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.fade-ng-cloak {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
display: block !important;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
opacity: 1;
}
A pure CSS solution without adding extra-classes to the HTML:
HTML
<div ng-cloak>{{myProperty}}</div>
CSS
[ng-cloak] {
display: block !important;
opacity: 0;
}
[ng-cloak],
.ng-binding {
transition: opacity 300ms ease-in-out;
}
.ng-binding {
opacity: 1;
}
My solution is similar to some of the others, but my use case required that I use cloak on a div that angular doesn't bind to, so this is what I ended up doing...
(browser prefixes omitted for brevity)
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
display: none !important;
}
.fade-ng-cloak {
display: block !important;
opacity: 1;
transition: opacity 0.5s;
}
.fade-ng-cloak.ng-cloak {
opacity: 0;
}
HTML
<div class="row ng-cloak fade-ng-cloak">
<div class="col-xs-12">
<uib-accordion close-others="true">
...
</uib-accordion>
</div>
</div>