I have this code
.card:not(:hover) .movePrevCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
.card:not(:hover) .moveNextCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
Is there a way I can merge this together, instead of wrting it two times?
I have tried
.card:not(:hover) .movePrevCarousel , .moveNextCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
and it didn't work
You cannot merge it but you can use multiple selectors for the same change
.card:not(:hover) .movePrevCarousel,
.card:not(:hover) .moveNextCarousel {
/* Used to make the button appear, when mouse hover*/
opacity: 0;
}
If you were using a css pre-processor (like less, sass) you would be able to do
.card:not(:hover) {
.movePrevCarousel,
.moveNextCarousel {
/* Used to make the button appear, when mouse hover*/
opacity: 0;
}
}
which would produce the same result
Related
I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout)
You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY
This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'
If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css
I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.
I make a code that workds to fadein, but to fadeout not working:
Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation
#menu-backdrop {
display: none;
animation:fadeOut 5s linear;
}
#menu-backdrop.exibir {
display: block;
animation:fadeIn 0.5s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
#keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0;
}
}
If anyone can post a work solution should be great, thank you very much guys.
Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.
A quick example:
const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );
button.addEventListener( 'click', event => {
event.preventDefault();
nav.classList.toggle( 'active' );
});
nav {
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: red;
transition: opacity .4s;
/* This should be set to 0, but to make the point
* of pointer-events clear, I will set it to slightly
* higher so you can see there's no interaction
* with the nav. */
opacity: .1;
pointer-events: none;
}
nav:hover {
/* If you can interact with the navigation,
* you will see it change color. */
background: blue;
}
nav.active {
opacity: 1;
pointer-events: all;
}
nav + button:before {
content: 'Open ';
}
nav.active + button:before {
content: 'Close ';
}
<nav></nav>
<button>Nav</button>
The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.
I would like to customise my Atom Editor so that all scroll bars would fade out when their parent is not hovered with the cursor. Trying to accomplish this, I added the following lines to my styles.less stylesheet:
atom-text-editor.editor {
.horizontal-scrollbar, .vertical-scrollbar {
opacity: 0.2;
transition: opacity 250ms;
}
.scroll-view:hover .horizontal-scrollbar {
opacity: 1;
}
.scroll-view:hover .vertical-scrollbar {
opacity: 1;
}
}
This works very well for the main editor view. When two or more panes are present, the scroll bar of the hovered file is shown in full colour while the other(s) fade out. Unfortunately this applies only to files and not to the tree view. How would I adapt the code above to include the scroll bars of the tree view as well as the ones of the files? I am using the Atom Material UI theme.
This issue is solved by adding the following code to styles.less
// fading scrollbars when pane not hovered
.pane:not(:hover) {
::-webkit-scrollbar {
&-thumb {
background-color: rgba(68, 169, 249, 0.3);
}
}
}
I'm trying to do an hover effect with a svg. This is the effect I would like to achieve. When I do a mouseover on the two paths and the text, I want the other paths and texts to have a lower opacity (I did this part), but I also want the the percentage to appear. When the mouse isn't over anything, I want all the paths and texts to have an opacity of 1 and no percentage visible.
I used this code to change the opacity of the paths
.tracciati:hover > g {
opacity: 0.25;
}
.tracciati:hover > g:hover {
opacity: 1;
}
This is the code: http://jsfiddle.net/ysrzjs28/
I refactored your html to include the percentage elements next to their respective graph elements. This made it easier to select the sibling element for display using CSS. Since there is no parent selector in CSS, you would have to use jQuery or javascript to achieve the results you want using pure CSS. I added a container g element and re-assigned your classes. The CSS looks like this
.container:hover > .tracciati {
opacity: 0.25;
}
.container:hover > .tracciati:hover {
opacity: 1;
}
.percentuali {
opacity: 0;
}
.tracciati:hover + .percentuali {
opacity: 1;
}
Here is a working fiddle: http://jsfiddle.net/ysrzjs28/2/
Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.
Preface
I'm trying to create a responsive website with a navigation menu that satisfies the following two requirements:
Navigation is fully visible in a normal browser window, laid out horizontally.
Navigation becomes a toggleable vertical menu for mobile devices and small screens, which animates between its "opened" and "closed" state.
I want performance to be good on mobile devices — especially on iOS — which means that the animation should use a GPU-accelerated translate3d transform CSS transition.
My Problem
Setting this up was a piece of cake, and for the most part it works great. I used z-index: 1 and transform: translate3d(0,-100%,0) to hide the menu behind a header with z-index: 2 in its default closed state, and then transform: translate3d(0,0,0) to animate the menu to its opened state.
But I'm just having one problem: When I resize my Chrome browser window and the mobile media query kicks in, the menu animates from an opened to closed state.
Resize your browser window to less than 600px wide to see the problem in action:
Fullscreen jsfiddle: http://fiddle.jshell.net/ymDYG/1/show/
Original jsfiddle: http://jsfiddle.net/ymDYG/1/
I think I know why this is happening: when the mobile media query kicks in, the browser sees that .nav is not currently active, so it animates it to the default closed state. I've tried experimenting with using display:none and display:block for the different media query states, but that seems to completely break the animation.
How can I prevent the nav menu's "closing" animation from firing as the browser window is resized?
Nice job, very clean. Can i steal it? :-)
Anyway, here's your solution with a demo.
I just moved the transition to another class:
.nav {
/* stuff */
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
Which you can add to the element at first "Toggle":
function toggle(){
$(".nav").addClass("activated").toggleClass("active");
}
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again, you could use Modernizr's mq method:
$(window).on('resize',function(){
if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated");
});
Referring to the side effect that Giona mentioned:
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again (...)
there is a cleaner way to fix this without firing on each resize event. You can remove the class resposible for transition after the transition end (full demo here):
$(function()
{
$(".nav").on("transitionend", function() {
$(this).removeClass("activated");
});
}
)();
By combining answers from Giona and Janusz Kacalak (and Justin Bull's comment), we can further optimize the code so that the nav bar will never animate from an opened to closed state (not just for the first time, which is what Giona's code does).
function toggle() {
var navbar = $(".nav");
if (navbar.hasClass("active")) {
// Closing the nav bar.
navbar.removeClass("active");
// Listening for a transition.
// Use `.one` here because we only want this to be called once.
navbar.one(whichTransitionEvent(), function() {
// Remove animation property after the nav bar is closed.
navbar.removeClass("activated");
});
} else {
// Opening the nav bar.
navbar.addClass("activated").addClass("active");
}
}
// Ref: https://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
body { margin: 0; }
.toggle { display: none; }
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { float: left; margin: 0; padding: 20px; background: #fdd; }
.nav li:nth-child(2n) { background: #dfd; }
#media only screen and (max-width: 599px)
{
.toggle {
display: block;
position: relative;
z-index: 2;
padding: 20px;
background: #eee;
}
.nav li {
display: block;
float: none;
}
.nav {
display: block;
position: relative;
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Toggle menu
<ul class="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>