Following coding is to expand Div when mouse hover its space using CSS transition. The problem is height in that transaction can be defined specific height. Defining specific height can be workable for only desktop version but for mobile version, that's gonna be problem.
For desktop version, specific list in is three columns thus defining specific height is Ok. For mobile version, I merge these three column to be one column thus defining specific height is not ok.
div.mycolumn {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: #d5d5d5;
}
div.mycolumn:hover {
max-height: 500px; <<<< WANT AUTO HEIGHT INSTEAD
transition: max-height 0.25s ease-in;
}
My question it AngularJs can be get specific height of current Div and pass it into CSS, (i'm using LESS instead.)
div.mycolumn
.container
.row
.col-xs-4.col-sm-12
.row(data-ng-repeat="data in mydata1")
.col-xs-12.col-sm-12.col-md-3
{{data.myname}}
.col-xs-4.col-sm-12
.row(data-ng-repeat="data in mydata2")
.col-xs-12.col-sm-12.col-md-3
{{data.myname}}
.col-xs-4.col-sm-12
.row(data-ng-repeat="data in mydata3")
.col-xs-12.col-sm-12.col-md-3
{{data.myname}}
.category-box {
max-height: 0;
transition: max-height 0.5s ease-out;
overflow: hidden;
}
//For Mobile
.category-box {
&.show {
max-height: 999px;
transition: max-height 0.5s ease-in;
}
}
//For Desktop
#media screen and (min-width: 48em){
.category-box {
&.show {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
}
}
Above codes are workable for my question.
Related
Does anybody know how to play transitions from two separate Components
with the same styling at the same time.
Here is a video, which shows my problem.
https://youtu.be/WNu4Mdfn98U
Important CSS Parts
.Container_Active .Description {
max-height: 500px;
margin-top: 5px;
color: var(--ifm-color-on-primary);
transition: max-height 1000ms ease-in; /* Transiation 1 */
}
.Description {
max-height: 0;
margin: 0;
font-size: var(--ifm-font-size-18);
overflow: hidden;
transition: max-height 1000ms ease-out; /* Transiation 2 */
}
Important HMTL Parts
<div
className={clsx(styles.Container, {
[styles.Container_Active]: active,
})}
>
</div>
<SectionRightItem
key={i}
title={section.title}
description={section.description}
onClick={() => {
setIndex(i);
}}
icon={section.icon}
active={index === i}
/>
My goal is that the one element slowly shows the description and the other element slowly hides the expanded description at the same time.
But somehow the transitions are played in a row, although they are triggered at the same time.
Thank you ^^
Actually your animation is starting at the same time, but the problem is that you use the transition of max-height with a value that's too high, so the transition will start from the height of 500px to 0px, but your content height doesn't even reach half of it, so it appears like there's a delay between your transition
To resolve the problem, you can lower the value of .Container_Active to match your actual description height, or change it to height rather than max-height with an average height of your actual description
Here's a simple snippet about the difference between max-height (light blue) and height (red) for the transition which makes your transition looks like it's delayed, both height / max-height is set to 0 when not opened and 10em when opened
$(function() {
setInterval(function() {
$('div').toggleClass('open');
}, 1500);
});
div {
position: absolute;
}
#front {
max-height: 0;
overflow: hidden;
background: lightblue;
transition: max-height 1000ms ease-in-out;
padding-left: 3em;
}
#front.open {
max-height: 10em;
transition: max-height 1000ms ease-in-out;
}
#back {
height: 0;
background: red;
transition: height 1000ms ease-in-out;
opacity: .75;
}
#back.open {
height: 10em;
transition: height 1000ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='front' class='open'>
Hello World Welcome<br/>World</br>Welcome
</div>
<div id='back' class='open'>
BACK
</div>
CODE SAMPLE HERE: http://codepen.io/colbisaurusrex/pen/YZdKyO?editors=1100
First problem:
I am trying to smoothly expand and compress a div (class: event) on hover. It expands smoothly, but it snaps back quickly when user is no longer hovering on div. I'd like to transition back at the same ease as it expands
Second problem:
Simultaneously, I'd like to reveal an inner, hidden child(class: hidden) when I hover over its parent(class: event). Ideally, I'd like to reveal it when the parent is fully expanded. And ease it back to hidden as the parent compresses. Right now, it is revealed immediately, before the parent div is fully expanded. I have tried to add a delay.
Basically, there is a beginning and ending transition that exact mirrors of each other. I'd like to do this with no Javascript
Bonus Question: If the entire transition was set off by a button click(say the Show Details button), do I have to use JS? Is there a way to do this with CSS only?
/* This is the CSS I am working with */
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out;
}
.event:hover {
height: 300px;
transition: height 500ms ease-in;
}
.event:hover .hidden {
display: block;
transition: display 300ms ease-in 1s;
}
.hidden {
font-size: 30px;
display: none;
}
/* End of css */
problem 1: transform should be transition
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out; // change this to transition
}
Problem 2: try using opacity instead of display:
.event:hover .hidden {
/* display: block; */
/* transition: display 500ms ease-in 1s; */
-webkit-transition: opacity 2s ease-in-out;
opacity: 1;
}
.hidden {
font-size: 30px;
/* display: none; */
opacity: 0;
}
demo: http://codepen.io/anon/pen/NpeWZz?editors=1100
I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from.
Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/
Here's the CSS code in case you see something wrong immediately:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
}
.toggleable {
transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
I'm using a checkbox-label combination to trigger the opening and closing of the menu.
The first thing you need to understand is that the visibility property in CSS cannot be animated. This is due to it only having two states (either visible or hidden, nothing in between to facilitate the animation).
If you want to make a fade-in effect, you can use opacity:0; to opacity:1; and give that a transition instead.
The next thing to note is that your animation time is very long, and if you are animating a max-width, you need to shorten the animation time to adjust.
See fiddle : https://jsfiddle.net/m9pd8bjh/12/
And CSS:
.toggleable {
transition: max-height 0.25s ease-in-out;
}
If you specifically want that long animation timeframe, then you will have to use something other than a max-height solution.
This would then become a new avenue to approach as you would have to use JavaScript, jQuery or some other such framework.
For future reference, here is a fiddle doing the same using jQuery: https://jsfiddle.net/m9pd8bjh/15/
And here is the jQuery code:
$('.toggler').click(function(){
$('.hide').slideToggle();
});
I add another transition when you close the menu and I removed the initial margin of the ul element. Is that effect ok for you ?
CSS code changed
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#menu-main { margin: 0; padding: 10px 40px }
input[type=checkbox]:checked ~ .toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
See this fiddle
I have a nav bar for which I'm trying to make the toggle button work, my toggle button is a checkbox, so following is the css to make the navbar (#navbar-left) appear when you click on the checkbox
#navbar-left{
max-width: 0;
min-width: 0;
width: 0;
transition: max-width 0.2s ease;
transition: min-width 0.2s ease;
}
.nav-trigger:checked ~ #navbar-left {
max-width: 200%;
min-width: 20%;
width: auto;
float: left;
}
where .nav-trigger is the check button, I have been able to either close the navbar smoothly using transition or open the navbar smoothly using transition by applying min-width or max-width at a time, but how can I use them both to open and close the navbar smoothly using the transitions.
I cannot simple apply the transitions using width property because I've to always set the width property to auto.
What would be the best solution or any alternate way to achieve this?
It should be written within one single rule :
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
#Syntaxe
/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/ * Apply to 2 properties * /
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
#navbar-left{
max-width: 0;
min-width: 0;
width: 0;
transition: max-width 0.2s ease,min-width 0.2s ease;
}
.nav-trigger:checked ~ #navbar-left {
max-width: 200%;
min-width: 20%;
width: auto;
float: left;
}
There are couple of similar questions around. But here's a little change in the case.
I am using CSS3 transition to show a small div in the bottom of the page. When I set the class .show, it slides up and when I remove it, it slides down and goes out of the page.
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
}
.bar.show {
opacity: 0.85;
bottom: 0;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
My problem is, though it goes away, it still is a display:block element. Which causes my body have scroll. Is there any way by which I can set display:none (using CSS only) after transition? Or some how convince body not to have scroll? (I already have overflow: hidden).
Since transition-delay don't work on display property. I tried visibility, but still the browser keeps some space for scroll.
Update:
Just incase we don't find any good solution, I've done it this way for now instead of display: none.
.bar {
transition: max-height 0s linear 0.3s, bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
max-height: 0;
overflow: hidden;
border-top-width: 0;
padding: 0;
}
.bar.show {
opacity: 0.85;
bottom: 0;
max-height: 50px;
padding: 5px;
border-top-width: 1px;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
Here's something that could be useful, I've essentially implemented this via position:fixed, check this fiddle to see if it's something that meets your requirements - http://jsfiddle.net/7x0oajv2/
Second approach could be using position:absolute with a overflow:hidden on the body like so - http://jsfiddle.net/7x0oajv2/1/
I would try to set the margin as following:
height of the division = x
margin-bottom: -x;
Not sure if this works but I think it should. Otherwise you might use
position: fixed;
Or the third possible solution would be to not let the division slide out at the bottom but on the left side. This can be done like this:
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
left: -100px;
}
If you want to change CSS dynamically you must use JavaScript or jQuery to change DIVs property.
E.g
$.("#myDiv").removeClass('displayBLOCK');
$.("#myDiv").addClass('displayNONE');
CSS:
.displayNONE{
display: none;
}
.displayBLOCK{
display: block;
}
If you just want to remove the div, call $.('#myDiv').hide(). You don't need to set display property to "none".