See this plunker, the animation of adding of an item is only working if first an item is deleted from the list. How to fix this?
css:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
height: 0px;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
height: 30px;
}
.repeat-item {
background: green;
margin-bottom: 5px;
height: 30px;
}
html:
<div ng-repeat="item in items " class="repeat-item">
{{item}} <span class="delete" ng-click="remove($index)">delete</span>
</div>
<div ng-click="add($index)">add</div>
Comment from Blaise was really the answer. I had problems using Chrome. Solution was to switch from 1.2 to 1.4 of Angular/AngularAnimate, then it worked perfectly.
Related
I am trying to animate a side menu, but for some reason it just wont work!
I read on a few answers that using a map to map the <li> items could be the issue (and I have tried with just a few items with static text), but that doesnt seem to be the problem.
Additionally, I have also put the generated items into a state, and wrapped the set with an useEffect to prevent retriggering of the map, still doesn't work. Only the transition is not working, the menu is appearing where it must appear, closes itself when I click the menu button, etc.
EDIT: I think it is worth mentioning that while working on it on my development server, when I am updating my css file (its not refreshing the page), when I change some of the styles that make the sidebar move, it moves with animation, so the animation is there, it is just not working when I am clicking the open/close button but it just appears instantly.
P.S. uuid() generates unique key for each element, so that is not an issue either.
export default function SideBar({ names, closeSidebarOnClick, show }) {
const [robots, setRobots] = useState();
useEffect(() => {
setRobots(GenerateNavItems());
}, names);
function GenerateNavItems() {
return names.map((robotName) => {
return (
<li key={uuid()} className={`nav-item`} onClick={() => {closeSidebarOnClick();}}>
{robotName}
</li>
);
});
}
return (
<nav className={`sidebar ${show ? "show-sidebar" : ""}`}>
<ul>{robots}</ul>
</nav>
);
}
.nav-item {
padding-left: 15px;
text-decoration: none;
font-weight: bold;
}
.nav-item:hover {
color: red;
cursor: pointer;
}
.toggle-sidebar-button {
user-select: none;
cursor: pointer;
padding-left: 1.5rem;
padding-top: 0.5rem;
border: none;
background: transparent;
z-index: 300;
/* z-index: 50; */
}
.toggle-sidebar-button:active {
border: none;
}
.toggle-sidebar-button-line {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
.sidebar {
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 200px;
z-index: 200;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.sidebar.show-sidebar {
transform: translateX(0);
}
.sidebar ul {
height: 100%;
list-style: none;
padding-left: 3rem;
padding-top: 3rem;
display: flex;
flex-direction: column;
}
<div id="root">
<div class="content row">
<div class="toggle-sidebar-button">
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
</div>
<nav class="sidebar ">
<ul>
<li class="nav-item">ROBOT 1</li>
<li class="nav-item">ROBOT 2</li>
</ul>
</nav>
<div class="rendered-robot col">
<div>CHOOSE ROBOT</div>
</div>
</div>
</div>
It's possible that as you are re-rendering the nav component so the transition is not been visible. I suggest you to try this experiment - In closeSidebarOnClickdont don't let this do a re-render and just use the - document.getElementsByTagName('nav')[0].classList.add('show-sidebar');
There is a way to create a React.createRef() or useRef as mentioned here but this again is not to be used frequently.
Well, it may be a bad practice but when it comes to css animations what is the alternative we have? I use these animations via redux all the time :) I think the dom must not be manipulated directly frequently but since this is a nav bar and likely there is only one nav in the entire app, this much shall be ok. Let me know in case you find a typical react way of getting css animations work.
I was having this same issue, and uuid() WAS the problem. Simply using a different type of key solved the transition issue.
After updating my firefox to version 47.0.1 I discovered a strange issue with position:fixed.
The bellow snippets works fine in Chrome, IE and Firefox < 47.
However, in Firefox 47+ the .event2 node is not clickable...
After some investigation, I found that it could be fixed by removing the z-index:0 of the .g element.
Well, actually it could also be fixed by removing the z-index:3 of the .a element or by removing the overflow: hidden; of the .f element.
Fixing is not the problem, but I was wondering if anyone has a clue on what as changed in Firefox 47... Bug or on purpose ?
(To me it looks like a bug...)
EDIT: I created a bug report on https://bugzilla.mozilla.org/show_bug.cgi?id=1283436
EDIT2: This is really a bug as it does not occur un Firefox 48 beta
document.querySelector('.event1').addEventListener('click', function() {
alert('foo');
})
document.querySelector('.event2').addEventListener('click', function() {
alert('bar');
})
.a {
z-index: 3;
position: relative;
}
.f {
height: 50px;
width: 100%;
background-color: yellow;
overflow: hidden;
position:relative;
}
.g {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.k {
height: 50px;
width: 100%;
background-color: red;
}
.l {
position: fixed;
}
.m {
background-color: lime
}
<div class="a">
<div class="f">
<div class="g">
<div class="k event1">
<span>When it is working, this is clickable <br /> and alert (foo) <br /> </span>
<div class="l">
<div class="m event2">
<span>When it is working, this is clickable <br /> and alert (bar) then alert(foo)</span>
</div>
</div>
</div>
</div>
</div>
</div>
This is indeed a regression of Firefox starting from version 46.0.1
up to version 48.0a2
For records, the original bug can be tracked here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1275411
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 make an animated menu that when I hover over it , the background (or image) reduces and at the same time the text expands.
Thats my style sheet :
.menus {
float: left;
background-image: url(images/menus_bg.png);
width: 208px;
height: 283px;
}
.menusimg {
width: 208px;
height: 283px;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/menu1.png);
}
.menusimg:hover {
background-size: 80% 80%;
}
.menusimg, .menusimg:hover {
-webkit-transition: background-size 0.2s ease-in ;
}
.menustxtbox {
font-family: MP;
padding-top: 240px;
width: 208px;
height: 283px;
color: #4c4c4c;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.2em;
}
.menustxtbox:hover {
padding-top: 235px;
font-size: x-large;
color: #4fa3f9;
}
.menustxtbox, .menutxtbox:hover {
-webkit-transition:font-size 0.1s linear;
-moz-transition:font-size 0.1s linear;
}
and the html :
<div class="menus">
<div class="menusimg">
</div>
<div class="menustxtbox">
Text
</div>
</div>
Any ideas? A simple Java script or anything that will solve this problem? :)
Thank you in advance ^^
I second what ntgCleaner said.
In addition you can use:
$('.menus').hover(function(){
$('.menusimg').addClass('active');
$('.menustxtbox').addClass('active');
}, function(){
$('.menusimg').removeClass('active');
$('.menustxtbox').removeClass('active');
});
And your css would have:
.menusimg.active, .menusimg.active{
-webkit-transition: background-size 0.2s ease-in ;
}
etc.
Well, without any code to see that you've done anything or tried anything with javascript, I would suggest this:
Change your CSS to make real sizes of font size first:
.menustxtbox {
font-size:40px;
}
then make some jquery
$('.menus').hover(function(){
$('.menusimg').animate({width: "100px"});
$('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$('.menusimg').animate({width: "208px"});
$('.menustxtbox').animate({fontSize: "40px"});
});
Then delete your :hover css styles
And if you want to use hover, I would suggest looking into hoverintent
UPDATE for a comment below
To do this for each separate menu item, you will have to name things a certain way. Here's an example.
HTML
<div class="menu">
<div class="menuItem" id="menu1">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu2">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu3">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
</div>
Then with jQuery, you will have to use $(this) and .children()
$('.menuItem').hover(function(){
$(this).children('.menusimg').animate({width: "100px"});
$(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$(this).children('.menusimg').animate({width: "208px"});
$(this).children('.menustxtbox').animate({fontSize: "40px"});
});
When you use $(this), you will do whatever you want to the specific thing you are trying to use. Then you just go up or down from there using parent or children to do something to either of those.