I have created a small tooltip test using a div with an input and p. However, when I try and increase the opacity so that the tooltip effectively fades in and out, something seems to go wrong. I've tried this on Firefox & Chrome so far and can't figure out what the problem is.
FIDDLE:
http://jsfiddle.net/2vsts8fv/
That's because of the display: none property, which applies immediately.
As an alternative, you can use visibility to hide your item, which also plays along well with transitions:
p.tip {
display: inline;
visibility: hidden;
transition: opacity 1s, visibility 1s;
}
div.tooltip:hover > p.tip {
visibility: visible;
opacity: 1;
}
JSFiddle
That is because you are using display: none. Try visibility: hidden and give a better position through CSS.
Related
CSS transition property is only working in one direction on <details> tag -- when opening. No transition when closing. I've tested on Chrome & Firefox.
To add, on Chrome, the opening transition only works once.
details
position: relative
ul
position: absolute
bottom: 100%
left: 0
height: 300px
display: flex
flex-direction: column
transition: transform 0.3s ease-in-out
transform-origin: bottom
transform: scaleY(0)
&[open]
ul
transform: scaleY(1)
The details tag works by instantly showing and hiding its contents. When you close it, the contents immediately disappear so no transition is witnessed.
I am using Angular to hide/show items of a unordered list. Since the effect is a bit too fast for the user to notice the disappearance/appearance of my lis, I want to add a transition on the height.
li {
transition: height 1s linear;
overflow: hidden;
}
li.ng-hide {
height: 0;
}
This is where my problem is : the transition does not affect the lis, unless I set them a height, which I don't want, since I don't exactly know how big they are.
Here is a plunker to illustrate that. I've made the test on lis and divs and I've also tried without Angular which does not seem to be the responsible.
How can I make the transition work without setting the height of my elements ?
Just do it by animate max-height instead of height like in this DEMO PLNKR. In that way you are able to have a dynamic height of your element between 0 and your max-height property. There is no need for jQuery. You should avoid using jQuery or direct DOM-Injections in AngularJS applications.
li,
div {
transition: all 1s linear;
-webkit-transition: all 1s linear;
border: 1px solid;
overflow: hidden;
}
.work {
border-color: green;
max-height: 500px;
}
.no-work {
border-color: red;
max-height: 500px;
}
li.ng-hide,
div.ng-hide {
max-height: 0;
}
I have come across the same problem myself in the past and discovered as you have that the height must be set, this is in order for the transition to calculate what needs to happen. Two ways I have managed to get round the problem:
CSS way:
li {
transition: max-height 1s linear;
overflow: hidden;
max-height: 500px; // Any value above what you expect to be the biggest
}
li.ng-hide {
max-height: 0;
}
The above method has a two drawbacks in that, one you'll need to know an upper limit and two there will be a slight jump in animation. A better way might be to calculate the height with javascript:
** UPDATE FROM JQUERY **
var listItems = document.getElementsByTagName("li")
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.height = listItems[i].clientHeight + 'px';
}
Then you'd need the css:
li.ng-hide {
height: 0 !important;
}
To override the style attribute. Here is a pen of this example with a little bit extra in to illustrate the solution.
You don't necessarily need to set your transition on height.
You can set it on the ng-hide or ng-show property.
Here is your example with this feature :
https://plnkr.co/edit/pD4sQNGqpqrINJlZwE3q?p=preview
Simply assign the class to the element you want to animate.
.animate.ng-hide-add,
.animate.ng-hide-remove {
transition: all linear 2s;
}
You'll find more infos here : https://docs.angularjs.org/api/ng/directive/ngShow
nb: You can seperate the animation for ng-hide-add and ng-hide-remove in your css. of course.
Hope it helps !
Steps to show this issue.
Go to this page of the website;
http://chartwell.com/careers/your-career-at-chartwell
shrink your browser window down to mobile size. Close the menu with the icon. The animation finishes then the nav items appear again.
I have been having a lot of issues trying to fix this issue using the CSS here that I found in another answer;
.navbar-collapse.collapsing {
-webkit-transition: height 0.01s;
-moz-transition: height 0.01s;
-ms-transition: height 0.01s;
-o-transition: height 0.01s;
transition: height 0.01s;
}
But I can’t seem to figure out how to get it to go away.
Is there a way to make it go off screen after the animation?
My JS skills are not great.
You have a problem in "skin.css". Just open it and comment out or remove (display: block) in the following code, as shown below:
.container > .navbar-header, .container > .navbar-collapse {
/* display: block; */
width: 100%;
float: none;
}
add this
.navbar-collapse.collapsing .navbar-nav {
display:none;
}
to your css
I figured out a hack-y fix that I will be using for the time being. Going to close this for now.
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.