i was trying to increase decrease div height with smooth animation but fail to do so due to good command over css animation.
here is my code
<body ng-app="ang_app" ng-controller="ang_control01_main">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck" class="animate-show animate-hide"></div>
</body>
var app=angular.module('ang_app', ['ngAnimate']);
app.controller('ang_control01_main', function($scope) {
});
CSS
.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
#myDiv {
transition: .5s;
background-color: lightblue;
height: 100px;
}
#myDiv.ng-hide {
transition: .5s;
height: 0;
}
please check this site https://codepen.io/LFeh/pen/ICkwe must watch how they nicely increase decrease div height when we hover and out pointer from div. how to achieve the same smooth effect in my case.
It seems to work fine - are you sure that you have included a script reference to angular-animate.js? Here is a working sample of your expand and collapse transitions:
angular.module('app', ['ngAnimate']);
.animate-hide {
transition: all linear .5s;
}
#myDiv {
background-color: lightblue;
height: 100px;
}
#myDiv.ng-hide {
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js"></script>
<body ng-app="app">
<input type="checkbox" ng-model="myCheck">
<div id="myDiv" ng-show="myCheck" class="animate-hide"></div>
</body>
Related
I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}
I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>
Coming from https://stackoverflow.com/a/9334132/3779853: Let's assume a basic element that gets toggled programmatically. This could mean setting display to none/block or removing/inserting the element altogether.
$('#toggle').click(() => $('#square').toggle());
#square {
width: 50px;
height: 50px;
background: lightblue;
}
.animated {
animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
With a simple animation, you can add a transition effect for when the element appears. How do you do the same thing for when the element disappears?
I do not want to add further classes, no :hover, and no more Javascript code. In many JS frameworks, you can show/hide elements easily: .toggle() (JQuery, as above), ng-if (AngularJS), *ngIf (Angular), conditional rendering (React), v-if (VueJS) and so on. With above solution, a simple class="animated" is enough to have it appear with custom animations. So I am looking for a pure CSS solution for fade out animation here, assuming this is a standard problem.
Here is a 100% pure css solution.
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
}
#myBox:checked ~ .animated {
opacity: 0;
}
#myBox ~ .animated {
opacity: 1;
}
<input type="checkbox" id="myBox" style="display:none;"/>
<button id="toggle"><label for="myBox">toggle</label></button>
<div id="square" class="animated"></div>
You can use the opacity property with transition effect.
$('#toggle').click(() => $('#square').toggleClass('animated'));
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 0.5s;
opacity: 1;
}
#square.animated {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
I'm fairly new to learning CSS and have been playing with some animation and things.
In my CSS, I have the same thing repeating again and again, but with a difference of 0.1. It's animation-delay: 0.1s, this increases in increments of 0.1s.
Do I have to type the code like I have in my example. Or is there a way I can tell it to increase by 0.1 for the next class? Or should I have done this differently?
The reason is that I wanted to create about 50 of these squares to see what it looks like. I don't really want to type out 50 classes and then change the increments to 0.2 for each class, I would have to change it 50 times. I'm sure there's a better way to do this?
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
.first, .second, .third, .fourth, .fifth, .sixth, .seventh, .eighth, .ninth, .tenth {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
}
.second {
animation-delay: 0.1s;
}
.third {
animation-delay: 0.2s;
}
.fourth {
animation-delay: 0.3s;
}
.fifth {
animation-delay: 0.4s;
}
.sixth {
animation-delay: 0.5s;
}
.seventh {
animation-delay: 0.6s;
}
.eighth {
animation-delay: 0.7s;
}
.ninth {
animation-delay: 0.8s;
}
.tenth {
animation-delay: 0.9s;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
<div class="sixth"></div>
<div class="seventh"></div>
<div class="eighth"></div>
<div class="ninth"></div>
<div class="tenth"></div>
</body>
</html>
Like someone suggested earlier, javascript is the best option:
If you do happen to learn jquery first this is a simple solution to your problem written in jquery (although its mostly plain ol' javascript).
// CHANGE THE NUMBER 4 IN THE NEXT LINE TO THE NUMBERS OF DIVS YOU HAVE
for (var i = 1; i <= 4; i++) {
var div = ".div"+i;
var value = "."+i+"s";
$(div).css("animation-delay", value);
}
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
div {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
animation-delay: .1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?
HTML:
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
CSS:
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
height: 331px;
}
JSFiddle
One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:
html, body { background-color: #dedede; }
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
margin-top:331px;
}
.show:hover + #appear, #appear:hover {
margin-top:0;
height:331px;
}
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)
Hope this helps! Let me know if you have any questions.
checkout the fiddle https://jsfiddle.net/8paj437a/2/
I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.
And to keep it intact from top. I placed it within a container and give position relative to the container.
HTML
SHOW IT
<div class="container">
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
</div>
CSS
.container {
width: 308px;
height:331px;
position:relative;
}
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position:absolute;
left:0;
bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
height: 331px;
}
By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.
transform: rotate(180deg);
I have the following CSS:
.foo
{
height:100px;
overflow:hidden;
-webkit-transition: height 200ms;
-moz-transition: height 200ms;
-o-transition: height 200ms;
transition: height 200ms;
}
.foo.open
{
height:auto;
}
When .foo has an auto height, it will be a height of ~550px depending on the content.
I add the class open using jQuery, and I would expect to see the height change from 100px to ~550px in 200ms using CSS3 transitions.
However what exactly happens is that the height changes from 100px to 0px, then jumps to ~550px.
-- See Live Demo --
If I instead change .open to height:550px then this works fine, however the content length will vary and therefore I need to set the height to auto, and not a fixed pixel height.
Why is the div closing instead of sliding to ~550px, and how can I resolve this animation issue?
I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.
Here's a demo to show you what I mean.
Code from demo:
.foo
{
max-height:100px;
overflow:hidden;
-webkit-transition: max-height 200ms;
-moz-transition: max-height 200ms;
-o-transition: max-height 200ms;
transition: max-height 200ms;
}
.foo.open
{
max-height:1000px;
}
It's not an elegant solution, but I hope it helps.
This isn't the most elegant solution, but it gets around the auto height issue.
On click of the button, calculate the height the div will be with auto height by doing:
var openHeight = $foo.addClass("heightauto").height();
Then remove this class straight afterwards, and apply a height to the div of openHeight:
$foo.removeClass("heightauto");
$foo.height(openHeight);
The heightauto class also needs to override the CSS3 transitions so that the height is changed instantly:
.foo.heightauto
{
height:auto;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
See Live Demo: http://jsfiddle.net/AbPEx/4/
This is still hacky though, so if there is a more elegant solution then I'm open to suggestions
It is not possible to use transitions with height:auto.
The trick with max-height is a pretty good solution but has some inconvenience, especially a weird delay if max-height is much higher than the real height.
Here is the trick I use : http://jsfiddle.net/g56jwux4/2/
Basically it is two imbricated DIVs translating in opposite directions. Take a look a the code at jsfiddle because my english is not good enough to explain it clearly.
HTML part:
<body>
<p>Technicaly this dropdown menu looks like a simple height transition.</p>
<p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
<input type="checkbox" id="menuOpen"></input>
<label id="bouton" for="menuOpen"><span>Click on me !</span>
<div id="menu">
<div id="masque">
<div class="choix" id="choix1">Choix 1</div>
<div class="choix" id="choix2">Choix 2</div>
<div class="choix" id="choix3">Choix 3 très très long pour voir la taille finale du menu</div>
<div class="choix" id="choix4">Choix 4</div>
<div class="choix" id="choix5">Choix 5</div>
<div class="choix" id="choix6">Choix 6</div>
</div>
</div>
</label>
</body>
CSS Part :
body {
font-family: sans-serif;
}
#menuOpen {
display: none;
}
#bouton {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 30px;
background-color: lightgray;
cursor: pointer;
}
#bouton > span {
color: black;
padding: 6px;
line-height: 30px;
}
#menu {
position: absolute;
top: 100%;
overflow: hidden;
min-width: 100%;
transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
transform: translateY(-100%);
visibility: hidden;
color: white;
}
#menuOpen:checked + #bouton > #menu {
transform: translateY(0%);
visibility: visible;
transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
transform: translateY(0%);
}
#masque {
position: relative;
background-color: gray;
transform: translateY(100%);
transition: transform 0.3s linear 0s;
}
.choix {
white-space: nowrap;
padding: 3px 6px;
}
.choix:hover {
background-color: darkgray;
}
There is a small bug in there, I already fix it. by adding min-height: 100px;
.foo {
min-height: 100px;
height: 100px;
...
}
There you won't see it go back to 0px.