Chrome opacity transition z-index issue - javascript

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).

Related

Animated Dropdown

Trying to get a dropdown menu going for my 6th project using Ruby on Rails. Kinda lost here, I've tried some codes from different sources scattered online, but I've had no success (not even close via copy/paste).
My current code:
.dropdown {
visibility: none;
}
.dropdown:hover {
transition-timing-function: ease-out 0.25s;
}
Can't seem to get the hover function working on top of the dropdown one for the life of me.
How would you recommend I get these ease-out/fade-in animations going?
Your visibility is set to none. And in your hover state you are just telling how you want the transition to unfold, but not what you want it to transition to... for eks. tell it to go from visibility: hidden to visibility: visible

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael
You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

Animating divs in a set

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

Chrome iOS - Loading indicator when applying class with jQuery

For some reason, my page displays the loading indicator on Chrome, when applying a class to a section with css transition. The class adds a bottom value that makes the section slide up. And I think this loading is causing the address bar to be 'active', and won't slide up again. And thus covering my navigation bar. I'm using iPhone 4, iOS5.
I've tried to pin-point what might be causing this, because it's not there on desktop Chrome, or on Safari on the iphone. And it only happens while the class is being applied, and the animation is activated, and also after.
The page has a google map, and I'm collecting data from an XML document using $.ajax. This is however not causing the problem, cause I've tried disabling everything in the js-file, except the click handler that applies the class.
Here's the CSS:
#main_bottom {
position: absolute;
bottom: -297px;
width: 300%;
height: 384px;
background-color: #ececec;
-webkit-transition-property: bottom, left;
-webkit-transition-duration: 0.2s;
}
#main_bottom.active {
bottom: 36px;
}
I'm using this to apply the class:
$(document).on('click', '#main_bottom > section:not(#gps) > a', function (e){
e.preventDefault();
$($main_bottom).toggleClass('active');
});
HTML:
<a href="/">Choose nearest shop
<div class="bigarrow"></div>
</a>
What could be causing this? It seems to be related to the animation somehow, not sure why. Could it be the absolute positioning, along with the css transition? If I'm allowed to link to the current live site, I'd be happy to do that :)
I found it was because of the <a href="/">. Even though e.preventDefault(); was set, this still caused Chrome to do 'something' with the href.

Why is only a small piece of this div visible?

I am running a test javascript/CSS app and there is a div that is exhibiting very strange behavior. I can't for the life of me figure out what is going on.
Point your browsers at http://korhal.andrewmao.net:9294/, and check out the div.payment (div with class payment) in the DOM.
This div contains an image and some text, but none of it's visible except for a tiny end piece of the text which shows up on Chrome and FF but not IE9. I haven't styled this part of the DOM yet but I can't even figure out why it is completely invisible. Examining the applied CSS doesn't seem to turn up any z-index, transparency, or hidden issues. Any suggestions?
My apologies, this code is hard to gist and this link may be subject to change.
Since ur .background is position fixed it will come on top , so u have to add
position:relative to div.payment
Use this
.payment img {
float: left;
position: relative;
z-index: 1;
}
and
.payment p {
float: left;
position: relative;
z-index: 1;
}

Categories

Resources