animate between css states? - javascript

Can I animate between hover states?
Eg:
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
So the bottom border would rise up from 0 to 25px.
I'm not sure if this is possible with CSS, or if I'd have to use jQuery?

You can use CSS3 transitions, but their support isn't that great at the moment:
#menu ul li a {
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
}
The syntax is: element time easing
Here's a Fiddle

Yep, just add a CSS transition.
in #menu ul li a {
just add:
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
You don't need an ms one by the way, IE10 doesn't use prefixes.
For loads more info, have a look at http://css3.bradshawenterprises.com/

You can do animations between css classes using jQuery UI
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
You can also use it to animate css properties:
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
This will animate from the current background color, color and width, to the ones you specify.

CSS3 transitions would do the job:
#menu ul li a {
display:block;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin: 0 5px;
padding: 0 10px;
-webkit-transition: border-bottom-width 0.5s ease-in-out;
-moz-transition: border-bottom-width 0.5s ease-in-out;
-o-transition: border-bottom-width 0.5s ease-in-out;
transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
}

Related

CSS Animation in React JS [duplicate]

Toggle when closed
Toggle when opened
My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).
I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).
<span class="opener">Text that appears next to toggle arrow</span>
Is there a way to do this with HTML and CSS or is Javascript required?
#menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #015a9d; }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
You can do this easily with an html5 element called <details>
<details>
<summary>Click here to see something</summary>
Here's more stuff below :)
</details>
The details tag should be the preferred way of doing it. But if you want to have it more fancy or other reason you can't use the details tag you could create such a dropdown yourself.
Maybe something like this:
CSS
.dropdown {
postion: relative;
}
.dropdown-content {
display: flex;
flex-direction: column;
width: fit-content;
border: 1px solid transparent;
position: absolute;
opacity: 0;
background: white;
z-index: 9;
transition: height 0.5s ease;
transition: opacity 0.3s ease;
height: 0;
overflow: hidden;
}
.dropdown.active .dropdown-content {
opacity: 1;
height: fit-content;
border-color: gray;
}
.dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.dropdown.active .dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(-90deg);
}
HTML
<div class="dropdown">
<button class="dropdown-trigger"> <i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
<span class="dropdown-content">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</span>
</div>
https://codepen.io/bluebrown/pen/qBZRaVX?editors=0100

How do I create a Toggle arrow that "opens up" a section to show text as you click on the arrow?

Toggle when closed
Toggle when opened
My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).
I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).
<span class="opener">Text that appears next to toggle arrow</span>
Is there a way to do this with HTML and CSS or is Javascript required?
#menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #015a9d; }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
You can do this easily with an html5 element called <details>
<details>
<summary>Click here to see something</summary>
Here's more stuff below :)
</details>
The details tag should be the preferred way of doing it. But if you want to have it more fancy or other reason you can't use the details tag you could create such a dropdown yourself.
Maybe something like this:
CSS
.dropdown {
postion: relative;
}
.dropdown-content {
display: flex;
flex-direction: column;
width: fit-content;
border: 1px solid transparent;
position: absolute;
opacity: 0;
background: white;
z-index: 9;
transition: height 0.5s ease;
transition: opacity 0.3s ease;
height: 0;
overflow: hidden;
}
.dropdown.active .dropdown-content {
opacity: 1;
height: fit-content;
border-color: gray;
}
.dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.dropdown.active .dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(-90deg);
}
HTML
<div class="dropdown">
<button class="dropdown-trigger"> <i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
<span class="dropdown-content">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</span>
</div>
https://codepen.io/bluebrown/pen/qBZRaVX?editors=0100

Touch (click) mobile device doesn't work

I have a problem close my drop down menu in mobile devices only. Is there a way how to remove classes i added before?
There is a Css hover for desktop and clickable for mobile devices.
Thank you for any answers.
$(document).ready(function(){
$('.drop_helper').on("click",function() {
$('.drop_nav').toggleClass('dropped');
$('.drop_helper').toggleClass('dropped_on').toggleClass('drop_down_btn');
});
});
li.drop_down_btn {
color:#a3a3a3;
}
li.drop_down_btn:after {
color:#a3a3a3;
font-family: 'FontAwesome';
content: "\f107";
font-size:16px;
padding-left: 9px;
}
li.drop_down_btn:hover {
cursor: pointer;
color:#1b2532;
}
li.drop_down_btn:hover:after {
font-family: 'FontAwesome';
content: "\f106";
color:#1b2532;
}
ul.drop_down {
position: relative;
display: inline-block;
list-style-type:none
}
ul.drop_nav {
list-style-type:none;
visibility: hidden;
opacity:0;
position: absolute;
text-align: left;
line-height: 26px;
/* background:url(bg_drop_down.png);*/
background-color:#FCFCFC;
padding:20px;
margin-left:-20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
khtml-border-radius: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.drop_nav li a {
display: block;
}
ul.drop_down:hover ul.drop_nav {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000
}
ul.dropped {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000;
}
.dropped_on:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
font-size: 16px;
padding-left: 9px;
}
.dropped_on:hover {
cursor:pointer
}
.drop_down:hover .drop_down_btn {
color: #1b2532;
}
.drop_down:hover .drop_down_btn:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
}
.drop_down .menu_btn a{
color: #a3a3a3;
}
.drop_down .menu_btn a:hover {
color: #1b2532;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drop_down">
<li class="drop_helper drop_down_btn">Category</li>
<ul class="drop_nav">
<li><a title="Food" href="/posts/food/">Food</a></li>
<li><a title="Fashion" href="/posts/fashion/">Fashion</a></li>
<li><a title="Entertainment" href="/posts/entertainment/">Entertainment</a></li>
</ul>
</ul>
Your question is a bit unclear but yes with a little bit of jQuery it's easy to remove a class, for example:
$('.drop_nav').removeClass('dropped');
Will remove the dropped class from elements with the drop_nav class.
EDIT
To also trigger on mobile touch events add the touchstart event to your jQuery.on like so:
$('.drop_helper').on('click touchstart'), function() {
...

Creating a vertical list of text that changes order on click

I am trying to modify the example found here:
div {
width: 200px;
margin: 30px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 200px;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}
<div>
<ul>
<li>Zurich</li>
<li>Geneva</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
So that:
The middle item in the list is already expanded at start
OnClick of any other elements the list shifts and the clicked item will move to the middle and be expanded
The opacity of the first and last elements of the list are decreased
Is this accomplishable in javascript or CSS? I have been reading about nth-child but I am trying to understand how to actually implement it. I understand nth-child can help me with the opacity case but is the only way to reorder the list (and animate the reordering eventually) possible with javascript? Or is CSS animations the way to go?

Fading an HTML <a> anchor tag with CSS

Link 1
<a class="LinkN1" id="HomeLink" href="./" >Home</a>
Link 1 CSS
.LinkN1{
text-decoration:none;
color:silver;
transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
width:70px;
text-align:center;
padding:5px;
height:20px;
background-color:#06C;
margin-left:103px;
margin-top:-30px;
float:left;
border-left:solid 3px silver;
}
.LinkN1:hover{
color:orange;
background-color:#333;
}
What i would like to do is fade the background color of the link LinkN1 from #06C to #333 in only CSS, but if this can be done is Javascript then i will use that.
NOTE SOLVED.
It was a transition mistake i did intend to animate both font and background colors hence color: and background-color: in the CSS.
Shaun. Edit- Only noticed comments now, thank you for the corrections, they are welcomed;
You animated the font colors, not the background:
transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
By Animating all css values, you're sure to get the background animated aswell:
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;}
Solution html:
.LinkN1 {
text-decoration: none;
color: silver;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
width: 70px;
text-align: center;
padding: 5px;
height: 20px;
background-color: #06C;
margin-left: 103px;
margin-top: -30px;
float: left;
border-left: solid 3px silver;
}
.LinkN1:hover {
color: orange;
background-color: #333;
}
<a class="LinkN1" id="HomeLink" href="./" >Home</a>
To animate the color and background-color change transition to:
transition: background-color .25s ease-in-out, color .25s ease-in-out;
You can use transition: all; but that will also animate any other property change.
You need to define transition for background-color not the font color. So just change your CSS to
.LinkN1{
text-decoration:none;
color:silver;
transition: background-color .25s ease-in-out;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
width:70px;
text-align:center;
padding:5px;
height:20px;
background-color:#06C;
margin-left:103px;
margin-top:-30px;
float:left;
border-left:solid 3px silver;
}

Categories