Is it possible to use normal CSS animations in angular?
I am trying just to show a div with a simple animation (the div is hide, then appears)
<div class="burguer-icon" (click)="onClick()">
<i class="fas fa-bars"></i>
</div>
<div
[ngClass]="showMenu ? 'shown' : 'hide'"
class="menu-content"
>
<div class="cross-icon" (click)="onClose()">
<i class="fas fa-times"></i>
</div>
// content
</div>
and I toggle the state, if clicked or not, in my component.ts
onClick() {
this.showMenu = !this.showMenu;
}
onClose() {
this.showMenu = !this.showMenu;
}
my css file for this component looks like this:
.burguer-icon {
background-color: orange;
}
.menu-content {
position: absolute;
top: 0px;
width: 100vw;
height: 100vh;
background-color: green;
transition: all 3s ease;
}
.show {
left: 0px;
}
.hide {
left: 90vw;
}
Why this simple animation does not work?
With angular, are you forced to use its animation strategy?
https://angular.io/guide/animations
Thanks in advance
Yes, you can use normal CSS animations. It's working fine on my end. Issue seems to be a typo in your class name show in css and shown in component html.
Update your html like:
[ngClass]="showMenu ? 'show' : 'hide'"
Related
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I am developing a web application using Material Design Lite.
One of the requirements is this: A sidebar exists such that by default, it will display the icons of the menu items at a smaller width (say 50px). Clicking on the menu (hamburger) icon then expands the drawer to a larger size and shows not only the icons but the text beside them. Here is an example of what I want to achieve:
Default:
Expand:
Here is my current HTML:
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">menu</i>
</button>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">apps</i>
</button>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">account_circle</i>
<span>Account</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">home</i>
<span>Home</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">assignment</i>
<span>Reports</span>
</a>
<a class="mdl-navigation__link" href="">
<i class="material-icons md-dark">input</i>
<span>Logout</span>
</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
#RenderBody()
</div>
</main>
</div>
</body>
Is there a good/correct way of doing this? I was wondering how this could be done and haven't come up with a good solution.
Have a look at this answer. I think it's a good approach to achieving this effect.
You can then just drop the polyfill in and write in your CSS something like:
.mdl-navigation .material-icons {
opacity: 0;
transition: 250ms opacity ease-in-out;
}
.mdl-navigation[min-width~="200px"] .material-icons {
opacity: 1;
}
If you think a polyfill is too much to add just this functionality I can think of one other way that doesn't use any javascript, but it wouldn't be as flexible with regards to how you animate the showing/hiding should you want to animate it. It involves overlapping the main content area over the drawer. Give me a moment and I'll mock up a demo.
EDIT
Here's what I was thinking as far as a non-js approach (still requires some for the toggling of the is-expanded class): https://jsfiddle.net/damo_s/27u4huzf/2/
.mdl-layout__drawer {
transform: translateX(0);
z-index: 1;
box-shadow: none;
border-right: 0;
&.is-expanded {
+ .mdl-layout__header {
margin-left: 240px!important;
&:before {
width: 0;
left: 200px;
}
}
~ .mdl-layout__content {
margin-left: 240px!important;
&:before {
width: 0;
left: 200px;
}
}
}
}
.mdl-layout__header,
.mdl-layout__content {
margin-left: 55px!important;
}
.mdl-layout__header {
z-index: 2;
&:before {
background: #fff;
content: '';
display: block;
position: absolute;
width: 15px;
height: 100%;
left: 40px;
}
}
.mdl-layout__header-row {
padding: 0 16px 0 22px;
}
.mdl-layout__content {
background: #878787;
}
.mdl-layout__drawer-button {
display: none;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
background-color: transparent;
}
On looking at it now, I don't think it's a very good approach (for a number of reasons you might notice playing around with it), but I'll leave it here just in case anyone wishes to improve upon it.
EDIT 2
I modified the previous demo to simplify it and allow for opening/closing animation. I don't know if at this point you'd exactly be doing things the "Material" way but I think it's workable and better anyway than my previous attempt. Demo: https://jsfiddle.net/damo_s/Ln6e4qLt/
.mdl-layout__drawer {
overflow: hidden;
width: 55px;
transform: translateX(0);
transition: 250ms width ease-in-out;
.mdl-navigation__link span {
opacity: 0;
transition: 250ms opacity ease-in-out;
}
+ .mdl-layout__header,
~ .mdl-layout__content {
transition: 250ms margin-left ease-in-out;
}
&.is-expanded {
width: 240px;
.mdl-navigation__link span {
opacity: 1;
}
+ .mdl-layout__header,
~ .mdl-layout__content{
margin-left: 240px!important;
}
}
}
.mdl-layout__header,
.mdl-layout__content {
margin-left: 55px!important;
}
.mdl-navigation {
width: 240px;
}
.mdl-layout__header-row {
padding: 0 16px 0 22px;
}
.mdl-layout__content {
background: #878787;
}
.mdl-layout__drawer-button {
display: none;
}
This cannot be done by pure CSS. You have have to use jQuery. Something like this
$('#hamburger-button').on('click',function() {
$('#menu .links').css('display','block');
});
Assuming you have hidden links by display:none.
If you can post here your css and html code I can help with specific example.
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.