I'm working on an angular app and I'm having an issue when adding a '.active' class to a nav item.
Here is a stackblitz link that demonstrates the issue:
https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css
Basically, when I click a box, it scales but part of the next box is showing, almost like the active box is transparent. My active class has a z-index of 1 and an opacity of 1.
On Firefox, this doesn't seem to be an issue. Also, I've done something similar using the same technique before (but without any frameworks). This link will show you an example from that project.
I'm not sure if I'm doing something wrong or if it's a Chrome issue. I appreciate any feedback.
EDIT: Just checked on Edge and the same issue is there. So far it seems like Firefox is the only browser where this issue doesn't exist.
Just add position:relative to either the .section a or .active
Such as:
.section a {
display: block;
width: 120px;
height: 80px;
opacity: .5;
transition: all .5s;
position:relative;
}
The reason the clicked element seems as if it has opacity <1 is that the next element is actually "above" it, while having opacity: 0.5;. By "above it" I mean that the next element is further down the DOM tree, hence having a higher stacking order than the previous (currently the clicked one).
our app has an angular overlay that is always in the dom (although not always visible).. and sometimes when I attempt to click on elements on the page, Selenium throws an error...
Element is not clickable at point (544, 297). Other element would
receive the click: div class="overlay" style="transition-property:
opacity; -webkit-transition-property: opacity; transition-duration:
300ms; -webkit-transition-duration: 300ms; transition-timing-function:
ease-in-out; -webkit-transition-timing-function: ease-in-out; display:
block; opacity: 0;">
Does anyone else experience this? webdriver .isDisplayed always reports that it is false, even when it is still inhibiting clicks.
I have written some code that attaches to protractor's waitForAngular function that checks for various states of the overlay's dom element (to wait until it has a display: attribute with value "none"). This helps a lot and I no longer experience this issue unless the browser is executing in the background. If the browser is not in foreground, then I hit the overlay issue very frequently. While protractor is waiting (based on my wait for angular override), if I bring the browser to foreground, then the test immediately begins continuing to execute and the dom state changes for the overlay.
Would love any thoughts from people with insight.
I assume the .isDisplayed not working properly seems to be a webdriver issue. And I also assume that the overlay being stuck in a specific dom state in the background to be an angular issue.
By what is in your css properties, your element has opacity: 0;
accordantly to this answer here, elements with opacity: 0 still receive events, so your overlay is not completely hidden.
I'd suggest you to use other css properties to hide your overlay such as visibility: hidden or display:none; instead.
I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/
It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.
Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.
Here is the jQuery I'm using right now but it is not correct:
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.
What am I doing wrong or what should I do differently?
Thanks everyone
EDIT:
I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'
I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious
Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?
If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.
If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788
Try animate
$('#image').animate({ opacity: '1'}, 600);
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.
The question is: which css property is the most suitable for this?
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
And how can I measure rendering performance like fps, gpu usage?
While all 3 properties make an element's box seem invisible, there are crucial differences between them:
Property
Painted
In layout
Stacking context
Pointer events
Keyboard events
opacity: 0;
No
Yes
New
Yes
Yes
visibility: hidden;
No
Yes
Varies
No
No
display: none;
No
No
Varies
No
No
The "Painted" column indicates if the browser will paint the element's background (e.g. background-image), #text content, and so on.
An element cannot be painted without also participating in the page's layout, of course.
This is No for all 3 properties and values, as the browser won't need to paint the element's box as it's invisible.
The "In layout" column indicates if the browser will compute the layout and dimensions of the element - along with any of its descendants not excluded from layout.
This is only No for display: none;, as with opacity: 0; and visibility: hidden; the browser will still determine the size of the element so it can correctly layout other elements relative to the current element (e.g. if you have span.hidden { visibility: hidden; display: inline; }).
The "Stacking context" column indicates that any use of opacity (except opacity: 1.0;) will create a new stacking-context, which complicates use of the position property.
The "Pointer events" column indicates if the element will respond to user-interaction from a pointing device, such as a mouse, touch-screen, stylus, etc.
e.g. with visibility: hidden; then the :hover state won't work, and clicking the same element won't apply :focus or :active either.
Additionally, the DOM won't raise any pointer events you'd handle in JavaScript (e.g. visibility: hidden; won't raise mouseclick, touchstart, etc - note that the click event can still be raised by certain elements, like <button> if invoked by the user using a non-pointer input method, such as with keyboard or voice (accessible) navigation means.
You can use pointer-events: none; to block pointer events, but this won't block keyboard and other non-pointer input and so should not be used to disable an element because the user can still use the keyboard to interact with it (especially <button>, <input />, <select>, and <textarea>).
The "Keyboard events" column indicates if the element can be interacted-with using keyboard navigation (and possibly other navigation means).
This includes smart-device (smartphones' and tablets') browsers' "Prev/Next Field" buttons for navigating <form> elements (as this uses tabindex).
Unlike how pointer-events can be disabled in CSS using pointer-events: none;, there is no CSS property to disable keyboard interaction.
This table shows a more complete comparison between the main values of those 3 properties:
Property
Painted
In layout
Stacking context
Pointer events
Keyboard events
Animatable
Opacity
opacity: 0;
No
Yes
New
Yes
Yes
Yes
opacity: 0.1;
Yes
Yes
New
Yes
Yes
Yes
opacity: 0.9;
Yes
Yes
New
Yes
Yes
Yes
opacity: 1;
Yes
Yes
Varies
Yes
Yes
Yes
Visibility
visibility: hidden;
No
Yes
Varies
No
No
Yes, with caveats
visibility: visible;
Yes
Yes
Varies
Yes
Yes
Yes, with caveats
Display
display: none;
No
No
Varies
No
No
No
display: contents;
Text and children only
Text and children only
Varies
Yes
Yes
No
Other
pointer-events: none;
N/A
N/A
N/A
No
Yes
No
The "Animatable" column indicates if that property can be used with a CSS transition (transition:) or CSS animation (#keyframes).
Crucially, the display: property cannot be animated, which is why we can't use a #keyframes timeline to completely hide an element after the animation is complete.
But curiously, we can animate the visibility: property despite being non-continuous, albeit with caveats.
Also, don't get confused by the similarly-named backface-visibility and content-visibility properties.
backface-visibility is only applicable to 3D transform operations.
content-visibility is an optimization to speed-up page rendering during initial page-load, but requires CSS Containment first, which is out-of-scope for this QA.
The answer found here will answer your first question (most likely display:none as the space is collapsed completely).
To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.
display:none will hide the whole element and remove that from layout space whereas visibility:hidden hides an element but take up the same space as before.
Opacity can be used if you want to create transparency or fade effect.
Performance will be an issue if display:none or visibility:hidden is used since they trigger paint and layout in most browsers which means your browser will redraw the viewport whenever those two changes so I will recommend opacity but still for that number of divs it will still be not performant as expected you can try webgl using a library called html-gl which render your divs in webgl check https://github.com/PixelsCommander/HTML-GL
Here is a compilation of verified information from the various answers.
Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):
Collapses the space that the element would normally occupy
Responds to events (e.g., click, keypress)
Participates in the taborder
collapse events taborder
opacity: 0 No Yes Yes
visibility: hidden No No No
visibility: collapse * No No
display: none Yes No No
* Yes inside a table element, otherwise No.
got from link
display:none because the divs are taken out of the flow then, thus their position does not have to be calculated.
That being said, 40000 divs sounds crazy. Did you consider the alternatives like HTML5 canvas or SVG?
Sometime i use visibility and opacity together to achieve effect to avoid click event
e.g.
normal state/element removed from screen:
visibility:hidden;
opacity:0;
transition: all .3s;
hover state/element on screen:
visibility:visible;
opacity:1;
Found this thread whilst investigating a hover: bug in Safari mobile
Confirming that opacity: 0 is a valid approach (it is in my case, thanks all). opacity: 0 fixes it enough to be workable (still requires an annoying js redraw on screen rotate [width change]).
Background info on the bug I fixed with opacity: 0:
The hover is on a li containing a div that is revealed when hovering (or single touch on mobile) a calendar entry. Really random working/not working in Safari mobile - and even weirder the behavior changes on a screen rotate++ [nb no media queries involved so not that].
So annoying as otherwise works in all other browsers I've tried.
I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.
I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);