In header i have search field, which should have with same lice container.
Some how i need to make biger input, example:
[![enter image description here][1]][1]
My code jsFiddle
$(".search-input").on("mousedown", function () {
$(this).addClass('active');
$('.search_container').addClass('test')
});
$(".cancel-icon").on("mousedown", function () {
$('#search-content').hide();
$('.search-input').removeClass('active');
$('.search-input').val('');
$('.search_container').removeClass('test')
});
For some reason input don't wanna go biger -_-
create one more class of your name. I just call it as .some and it to div.search-field when input is active and remove it when cancel-icon is clicked.
.some{
flex-shrink: 0;
width: 100%;
transition: width 1s;
}
.search-field{
...
width: 50%;
...
}
$(".search-input").on("mousedown", function () {
...
$('.search-field').addClass('some');
});
$(".cancel-icon").on("mousedown", function () {
...
$('.search-field').removeClass('some');
});
display: flex making the .search-field shrink. In order to avoid that I added flex-shrink: 0
Updated
Added transition: width 1s to animate a width of .search-field and added an extra style width: 50% to an existing .search-field which doesn't change the existing size but it will make impact in transition.
Related
there is an example with content dropdown: https://codesandbox.io/s/expand-content-4pc09c?fil...
But the appearance of content on the button is quite fast. I need to set smoothness using the transition property, but it didn't work.
As far as I understand, you need to add some kind of appearance effect with the help of visability, but here there is a link to useState also tried to set a property for the content: transition: all 0.5s ease-out; but the animation is not happening
I also tried change styles like that:
const styles = {
height: expand ? "auto" : "0px",
maxHeight: expand ? "auto" : "0px",
overflow: expand ? "visible" : "hidden"
};
but it turns out that i have the same result
You have to keep on mind various things to make it works. In your codepen there's a typo in visibility animation in styles.css. I attached you a working snippet but I'm explaining you some important topics about how it works.
Explanation
First of all if you're toggling styles with you styles variable it'll no respect transition as it will be rendered as inline styles, so the approach I use was create a new .wrapper__content.expanded class and the class is the one that'll be toggled with the state.
Second about CSS properties:
visibility cannot be transitioned as it doesn't have 'in-between' values, when the time of the transition (let's suppose 300ms) had passed it will change to visible or hidden with no intermediate values, that's why it cannot be 'animated'. But if you still want to add this property for accessibility purposes you can add a transition-delay to this property timing to trigger the change when height transition had finish.
height property is a difficult one to animate because it needs explicit values to work and I recommend you not to change the height: auto that comes by default, as it'll be adapting to its content (avoiding overflow issues). Instead of transitioning this property you should use max-height in collapsed state with a value of 0 and in expanded state with a value that your content will never reach (1000px in my snippet). This will do the trick, don't forget to add overflow:hidden; to hide the content when it's collapsed.
I think this answer will fulfill you requirements, but any questions feel free to ask. Hope it helps.
const App =() => {
const [expand, setExpand] = React.useState(false);
const onToggle = () => {
setExpand(!expand);
};
return (
<div className="wrapper">
<div className="wrapper__expand">
<button onClick={onToggle} className="wrapper__expand-btn">
+
</button>
Expand
</div>
<div className={expand ? 'wrapper__content expanded' : 'wrapper__content'}>
expanded content
</div>
</div>
);
}
ReactDOM.render( < App / > , document.getElementById("root"));
.App {
font-family: sans-serif;
text-align: center;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper__expand {
display: flex;
column-gap: 10px;
}
.wrapper__content {
margin-top: 10px;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-in-out;
}
.wrapper__content.expanded {
max-height: 1000px;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
We can really check transition using height property and somehow control the distance like that
transition: max-height .5s ease-in-out;
Сomment below solves my problem
I am looking for a way to animate (with #keyframes, transform...) some elements when the user scrolls the page. For example:
When offset is 0: div has height: 100px.
When offset is between 0 and 100: div is height: 50px and color: blue.
And so on...
Is is possible using pure CSS?
If it is not, what are the most efficient ways to do it with HTML or Javascript?
The most efficient way to animate an element's style properties depending on scroll position will probably be to add a class with a scroll function:
Working Example
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y > 500) {
// myID.style.backgroundColor = "blue"; // you can add individual styles
myID.className = "blue" // or add classes
} else {
// myID.style.backgroundColor = "red";
myID.className = "red"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 1100px;
}
#myID {
position: fixed;
height: 100px;
line-height: 20px;
transition: all 1s;
}
.blue {
background: blue;
animation: myAnimation 1s both;
}
.red {
background: red;
}
#keyframes myAnimation {
0% {
border-radius: 0px;
line-height: 10px;
}
100% {
border-radius: 100%;
line-height: 100px;
}
}
<div id="myID" class="red">Hello world</div>
Docs:
.scrollY
.className
.addEventListener
Methinnks it's not possible to 'spy' scroll with pure css. If you want, you can do this with jQuery:
$(document).scroll(function() {
var pos = parseInt($(document).scrollTop())
if(pos == 0) {
$('.yourDivClass').css({
height : '100px' ,
color : '#fff'
})
}
if (pos > 0 && pos <= 100) {
$('.yourDivClass').css({
height : '50px' ,
color : 'blue'
})
}
console.log(pos)
})
and of course if you wanna get a smooth transition, you supposed to declare transitions in your css file
.yourDivClass {
transition: height 0.5s ease
}
Scrolling is an event. Once you scroll the page, the event gets triggered and something happens. You cannot control events using Pure CSS. Period.
Some people would argue that even :hover is an event. Yes, and it is for some strange reason, implemented in CSS, but not others.
With pure CSS: no.
But you can have a class with keyframed animation associated with it, and then say when the element is scrolled into view, to add the class to the element. This will make it start doing the animation.
You can use Waypoints.js to set what happens when you reach a specific element of a page.
I'm using ng-view with ng-animate like so:
HTML
<body>
<div ng-view></div>
</body>
CSS
.view.ng-enter,
.view.ng-leave { transition: all 600ms ease-out; }
.view.ng-enter {
position: absolute;
top:0; left:240px;
width: 100%;
opacity: 0; }
.view.ng-enter.ng-enter-active {
opacity: 1;
left: 0; }
.view.ng-leave {
position: relative;
left: 0;
opacity: 1; }
.view.ng-leave.ng-leave-active {
opacity: 0;
left: -240px; }
Now throughout my app there are links that will change the view. The animation of the view changing works perfectly.
I now want to add animation to the body whenever the view changes. So basically, whenever .view.ng-view is active, a style needs to be applied to the body, which should be removed when the view animation is no longer active. How on earth do I do that?
I have trying to find this for a while myself, it works fine if you are adding and removing classes, but with ng-view its unique in that it's transition of 2 routes, and I haven't seen anything related to an emitter or anything. You have a few options though.
Here's a plunker;
1) The easy answer would be to add and remove an animation with a $timeout, with the same duration as the css for .view.
$rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
var body = $document.find('body');
$animate.addClass(body, 'overlay');
$timeout(function() {
$animate.removeClass(body, 'overlay');
}, 1000);
2) Another way is inside of the enter function you can put something in front of the done callback like, jQuery or TweenMax in this case.
app.animation('.view', function() {
return {
enter: function(element, done) {
TweenMax.from(element, 1, {
color: 'red',
onComplete: function() {
$log.debug('done');
done();
}
});
},
...
I would proberly look into something like jQuery to add a class to the body when the ng-view is active.
You could also have look into the ngAnimate which is explaining to perfection:
link to a very precise description of ngAnimate
As the title says I want to show a hidden span "box" when hovering an image, but I can't get it to work, so I was hoping you guys could figure out my mistake.
HTML
<span class="DDAA__bg">
<h1 class="DDAA__headline">DANSK DYREVÆRN ÅRHUS</h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200" alt="Dansk Dyreværn Århus"/>
</span>
CSS
span.DDAA__bg{
height: 200px;
width: 980px;
background-color: #666;
position: absolute;
display: none;
}
span.DDAA__pic{
display:block;
visibility: visible;
}
span.DDAA__pic:hover{
visibility: hidden;
transition-delay: 2s;
}
span.DDAA__pic:hover + span.DDAA__bg{
display:block;
}
You can see here how it works now, not as good :/
http://jsfiddle.net/ary3bt83/3/
element:hover > other_element {
display: block;
}
this is equal to the jQuery code
$(element).on('hover', function() { $(this).css("display", "block"); });
But doing hover on css sometimes is really buggy...
First you need to have jQuery installed ( look for jquery.js / jquery.min.js in source code or google for w3c jquery install )
After this you write following :
<script>
$(document).ready(function() {
// everything here is done once the page is loaded
// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
// show the element
$(".the_element_to_be_shown").css("display","block");
});
});
</script>
Don't forget that you must initially set display: none to the div that is first hidden and then shown. Also instead of .css("display","block") you can have simple animation like .fadeIn("slow");
I have this very simple code:
$(document).ready(function() {
$('.content>div').hide();
$('.content>h3').click(function() {
$(this).next().slideToggle('fast');
$(this).toggleClass('active');
});
});
it causes of course that my div slides out from top to bottom. Could you help me add to this code or command the line that in result it will be slide out from right to left??
.slideToggle() animates the height of the matched elements so you will likely have to rely on a different function/method - but this is not that difficult. You can do this either in JavaScript or use CSS3 animation properties. Depends on the use case but I'd probably use the CSS3 option because it is hardware accelerated on most devices so it is smoother.
Here's a simple sketch how that could be done
In the JavaScript file:
$('.content>h3').click(function() {
// just switch the class 'open' the rest is defined in CSS
$(this).next().toggleClass('open');
$(this).toggleClass('active');
});
And in the CSS file:
.content div {
width: 0;
overflow: hidden;
transition: width 1s ease-out;
}
.content div.open {
width: 100%;
}
Example:
http://jsbin.com/qebigohu/2/ (preview)
http://jsbin.com/qebigohu/2/edit (code)