Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
On my site I have an aside that lets the user perform common tasks like adding an item. There are multiple steps (pages) and I want them to appear to slide in left to right using CSS.
I have tried using the empty tag and the visiblity tag to trigger the transition but it never happens.
.slideOnVisible:empty{
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.slideOnVisible:not(:empty){
height: 100%;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
I don't need to transition the height property so if there is a better way please let me know.
I am using Bootstrap, LESS and ko.js
Here is a fiddle: https://jsfiddle.net/p97wdqqm/1/
It turns out you want something like this.
var DemoModel = function() {
var self = this;
self.obsProperty = ko.observable(null);
self.toggleObsProperty = function() {
if (self.obsProperty() === null) {
self.obsProperty({
id: 1
});
} else {
self.obsProperty(null);
}
};
};
ko.applyBindings(new DemoModel());
.slideOnVisible { /* initial state */
height: 2em;
width: 0;
white-space: nowrap; /* or it would wrap during the transition */
overflow: hidden;
-webkit-transition: width 2.5s linear;
-moz-transition: width 2.5s linear;
-ms-transition: width 2.5s linear;
-o-transition: width 2.5s linear;
transition: width 2.5s linear;
}
.slideOnVisible:not(:empty) {
width: 10em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<html>
<body id="main">
<div class="slideOnVisible" data-bind="with: obsProperty">
made it
</div>
<button data-bind="click: toggleObsProperty">Toggle Property</button>
</body>
</html>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to create the classic "black" overlay on hover of an image. For some reason mine is white. Can anyone explain to me what i'm doing wrong? Here is my jsFiddle.
<img class="thumb-img">
.thumb-img:hover {
opacity:0.5;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #202020;
}
Your background-color property is never seen, since the image itself occupies the entire space of the element. Wrap it in a <div> (or similar):
.img-fade {
background-color: #202020;
float:left;
}
.img-fade img {
display: block;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-fade img:hover {
opacity:0.5;
}
<div class="img-fade">
<img src="http://placehold.it/200x200" />
</div>
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 8 years ago.
I made a css transition which is from height auto to height: 75%.
CSS-Transition:
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
But its not working in IE and Firefox. I found some posts on google, but couldnt find a solution.
Thanks four your help.
To work with % and auto you can try with min-height like this:
div {
-webkit-transition: height 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div:hover {
min-height:75%;
}
Check this Demo Fiddle
Tested in Chrome 31 -- Firefox 26
Try this: transition example
CSS:
.tran{
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
height: 100px;
background: #e5e5e5;
height: 100%;
}
.tran:hover{
height: 300px;
}
HTML:
<div style="height: 200px;">
<div class="tran">
Example
</div>
</div>
Simple, change from height to min-height or max-height, what ever will better for your needs.
Example:Fiddle
It will be possible to obtain animate colour just by using css3?
Here is the demo about the effect I would like to obtain demo.
The demo is using jquery.color.js.
$(document).ready(function() {
$('.replace-bg-on-hover').hover(
function() {
$(this).animate({
backgroundColor: "#333"
}, 500);
return false;
}, function() {
$(this).animate({
backgroundColor: "#6CA2FF"
}, 500);
return false;
});
});
You can use css3 transitions for this. Here's a quick example - demo
Code from my example:
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #005ca1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box:hover {
background: #000;
}
Edit: Added the rest of the prefixes.
Of course, you can do it. You set a :hover color for the background and you don't forget to add the transition css property to the element :
CSS code :
.myElementToHover{
background: #c00;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease
}
.myElementToHover:hover{
background: #00c;
}
Generally speaking, when you want to use a CSS3 rule, Paul Irish (jquery) made a very usefull page : http://css3please.com/ Just use it, all the answers are here ! (except that you should now add the -ms- prefix).
With this code, you add a transition for every css property, but if you want to add a transition for only the backgroundColor, you replace 'all' by 'backgroundColor'.
0.5s is the duration of the animation. It can also be set in ms.
ease is the way the animation behave. Basic settings are :
linear
ease (default)
ease-in
ease-out
ease-in-out
But you can set your own transition :
cubic-bezier(0.215, 0.610, 0.355, 1.000)
Matthew Lein made a very nice page to help you make a custom easing settings : http://matthewlein.com/ceaser/
Heelo guys !
I need a hand with CSS.
I would like to do an effect on all the item when one of them is clicked.
#scrollBox #content .item:active (?)
{
width: 0px;
}
#scrollBox #content .item
{
width : 100%;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
I don't know is there is something which could replace (?) to get what I want ?
Thanks for your help !
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.