I'm trying to replicate the google's ripple effect in jquery + css.
It simply append a circular div inside buttons or divs, and when I click on the container, it applies a scale() animation to the circle.
I apply to the container (the button) the "ripple" class with position:relative and overflow:hidden, while on the circular div position:absolute
At the moment it works well for buttons, but for divs the overflow is not respected and the circle flows outside it.
button, .button {
padding:0.8em 1em;
border:none;
background:#09F;
color:#fff;
border-radius:0.5em;
cursor:pointer;
}
.ripple {
display:inline;
user-select: none;
position: relative;
overflow:hidden;
outline: none;
-webkit-transform: rotate(0.000001deg);
}
.effetto_ripple {
position:absolute;
border-radius:50%;
background-color:rgba(255,255,255,0.4);
transform:scale(0) translateZ(0);
}
.effetto_ripple.animato {
animation:ripple 0.6s ease-out;
}
#keyframes ripple {
0% {
transform: scale(0);
opacity:0.9;
}
100% {
transform: scale(2.5);
opacity:0;
}
}
This is the complete working code http://codepen.io/anon/pen/zvXKgz
Overflow is not settalbe on inline elements, change .ripple to inline-block. This will keep it inline, but you will be able to style it like a block element.
Related
I have div .list element with CSS below
.list{
bottom:0;
height:calc(100% - 85px);
left:50%;
max-width:600px;
padding-bottom:85px;
-webkit-transform:translate(-50%,-5%);
z-index:-1;
display:flex;
width:100%;
flex-wrap:wrap;
overflow-x:hidden;
overflow-y:scroll;
position:fixed;
justify-content:center;
opacity:0;
background-color:#f1f1f1;
}
I use JavaScript to add .anim class to this element which contains animation to open .list div element on click open button
document.querySelector('.list').classList.add('anim');
.anim class should animate opening .list using CSS animation.
.anim {
-webkit-animation:openlist 200ms ease forwards;
z-index:2
}
#-webkit-keyframes openlist {
0% {
-webkit-transform:translate(-50%,-5%)
}
to {
-webkit-transform:translate(-50%,0);
opacity:1
}
}
Problem with opacity: when I use Opacity outside CSS animation and put it inside .anim class after animation definition like below:
.anim {
-webkit-animation:openlist 200ms ease forwards;
z-index:2;
opacity:1;
}
.list div is scrollable without any problem but I don't get transition effect from opacity:0 to 1.
If I use opacity inside animation like below:
to {
-webkit-transform:translate(-50%,0);
opacity:1
}
Everything is working fine but .list div is not scrolling and scrollbar is hidden.
HTML
<body class="x">
<input type="search" class="s2" placeholder="Search...">
<div class="s1"></div>
<div class="c1"></div>
<div class="list"></div>
<img src="icons/heart.svg" id="m">
</body>
BODY CSS:
.x {
width:100%;
height:100%;
margin:90px 0;
overflow-x:hidden;
overflow-y:scroll;
}
Question: How to get CSS animation working with opacity inside and keep transition effect plus .list div scrollable?
I found a solution, problem was that i used opacity instead of filter:opacity, now i get opacity effect without scrolling problems
Referring to this sample:
https://codepen.io/jyloo/pen/KKwoLKB
I noticed when I have an animated container with animation-fill-mode set to forward, the absolute positioned child elements (popup) inside it doesn't display as expected, and it seems like their z-index is being ignored.
My animation:
.animate {
animation-direction: reverse;
}
.animate.animate--from-bottom {
opacity: 0;
animation: from-bottom 0.3s ease-out;
animation-fill-mode: forwards;
}
#keyframes from-bottom {
0% {transform: translateY(80px);opacity:0;}
100% {transform: translateY(0px);opacity:1;}
}
My Child Element (popup)
.popup {
z-index: 10;
position: absolute;
background: white;
padding: 0 1rem;
box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
width: calc(300px - 2rem);
}
If I remove the animation-fill-mode, the child elements display just fine.
Can anyone help me to understand this behavior and the workaround so that my child element (popup) can work find under and animated parent.
you can the css property like below for 3rd div.
To make 2nd div's content visible on top, you can try setting 3rd's z-index to lower value.
.dv {
position: relative;
z-index: -1;
}
demo - https://codepen.io/AB-DEV/pen/LYEdKPj.
you have to add class to the parent <div> of popup.
suppose I have add class have_popup to the parent div of popup <div class="card have_popup">.
now apply css to that class as below:
.have_popup {
position: relative;
z-index: 1;
}
I hope this will works fine for you.
Thank you...
I have a menu system where that when a ‘menu’ button is clicked some simple javascript allows a mobile menu to be shown as a drop-down.
I would like to have it so this menu transitions / animates in, but the display: none property seems to not be animatable with CSS animations. I don’t really want to just use opacity: 0 because the mobile menu will then be in the document flow, and on desktop devices I don’t wish this to be the case.
Is there any CSS solution to this? When I use the Greensock animation library, it allows you to animate or change the ‘display’ property. I can’t seem to get this to work with CSS animations though?
I’ve created a simple pen where I’ve just used a single div that animates (to keep it simple I haven't included any JS click events etc with this).
As you can see I’ve commented out the display: none on both the CSS for the id#bluebox and on the #keyframes animation. If you un-comment these you can see the problem that is created.
https://codepen.io/emilychews/pen/xPWddZ
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
/* display: none; */
}
#keyframes appear {
0% {/*display: none;*/ opacity: 0}
1% {display: block; opacity: 0.1;}
100% {opacity: 1;}
}
HTML
<div id="bluebox"></div>
I solved this by adding a transform: scaleY(0) to the element, and then animated this with the element on opacity: 0 for the first 1% of the animation, so you couldn't see the element 'scale up' so to speak. I used scale instead of width and height because width and height properties don't animate very well in terms of achieving the 60fps smoothness.
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
transform: scaleY(0);
}
#keyframes appear {
0% {opacity: 0;}
1% {opacity: 0; transform: scaleY(1)}
100% {opacity: 1; transform: scaleY(1)}
}
In this case, since you're attempting to animate the element, I would say you should probably use width and height to your advantage instead.
Something like this could act as a substitute for display none. (Codepen)
#bluebox {
width: 0px;
height: 0px;
}
#keyframes appear {
0% {
width: 0px;
height: 0px;
}
100% {
width: 100px;
height: 100px;
}
}
The width or height could also be replaced with your end width/height to allow for a more natural animation, depending on your goal. I can update the Codepen to include an example of what I mean if you'd like.
Let me know if this is what you were aiming for!
Edit: Fixed the Codepen link
i am trying to achieve a pretty simple effect ( I thought ). When a user clicks on a button, I need to slide in a div from the right side of a 'viewport' onto the viewable page.
at the moment I have the 'slide' div's css to look like this:
.slider {
postion: absolute;
right: -200;
display: none
}
Once a user clicks on a button, the div needs to show, and then move to the left, i.e.
transform: translate(-200px, 0);
At the end of the animation the end state of that div would need to be something like this
.slider.after-animate {
postion: absolute;
right: 0;
display: block;
}
then when the user 'closes' the div, I want to slide it back to right: -200px and then after the animation is done, I want to put a display:none on that div.
I have looked an several ngAnimate tutorials but nothing I could find deals with the 'before/after' animate scenario where I need to show\hide the div before/after it gets animated.
can anyone point me to the right direction ????
Thanks!
You could try css keyframes so that we have more than 2 states. In this example, there are 3 states for each animation.
.slider
{
position:absolute;
right:0px;
width:200px;
height:200px;
border:1px solid red;
background-color:red;
}
//angular animate automatically adds ng-hide-add when starting to add ng-hide class
.slider.ng-hide-add{
-webkit-animation: remove_sequence 2s linear ;
animation:remove_sequence 2s linear;
display:block!important;
}
//angular animate automatically adds ng-hide-add when starting to remove ng-hide class
.slider.ng-hide-remove{
-webkit-animation: enter_sequence 2s linear ;
animation:enter_sequence 2s linear;
display:block!important;
}
#-webkit-keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#-webkit-keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
#keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
DEMO
I'm making a web app and I want to switch between different tabs, which I have set up in section with the data-role set to page. I am able to switch through the tabs fine, but when I try to add a CSS transition it doesn't do anything. The app responds the same way whether I have a transition set or not, it doesn't even give me an error message of why no transition is taking place.
Here is my CSS:
[data-role=page]{
postion: absolute;
top: 0;
left: 0;
display:none;
transition: left 0.8s ease; /* faulty transition */
}
.active{
display:block;
}
.hide{
display: none;
}
The hide and active classes showed above in the CSS is what I use to toggle between tabs.
The transition property for css3 works only when the transition value changed.
In your case, if you want your transition to work, you would have to change the left property of your element. Maybe you could use opacity 0 and 1 instead of hiding/showing your element and put your transition on this property.
[data-role=page] {
position: absolute;
top: 0;
left:0;
display:none;
transition:opacity 0.8s ease
}
.active{
opacity:1;
}
.hide{
opacity:0;
}
If you want your transition on the left property. You should have values for this that change.
.active{
left:0;
}
.hide{
left:-100%;
}