I tried to use ng-animate i included in my controller
app = angular.module('Packs', ['ngAnimate']);
This is my style:
<style>
.animate-in {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.animate-out{
opacity: 1;
max-height: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
</style>
This is the html that is not working, well, it does work, just i had to do it toggling classes manually, i wanted to use ng-animate
<div ng-click="toggle('pack1')">
<div class="text"
ng-class="{'animate-in' : !displays.pack1,
'animate-out' : displays.pack1}">
Some text to toggle
</div>
</div>
Yes, use ng-show = "displays.pack1" on your text and then use the special classes ng-hide/ng-hide-active, see example in the documentation
Here is a jsfiddle that shows a toggle with opacity and height: http://jsfiddle.net/1djeqjfm/1/
.box.ng-hide { opacity:0; }
.box.ng-hide-active { opacity:1; }
(Or use ng-if and its classes ng-enter/ng-leave)
Related
When I click a div, I want a second div to expand/collapse. That is done using JS, HTML, and CSS. Now I want the CSS transition to animate.
Right now all I get is a jumping expansion and either a scroll (Edge) or a jump after a wait (Chrome, Opera, Firefox).
I've tried to set height to 1px instead of 0px, but that doesn't change anything.
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.height == '100%') {
ele.style.height = '0px';
} else {
ele.style.height = '100%';
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
overflow: hidden;
padding-left: 20px;
height: 0px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
Codepen behaves as I know the full site does, so for good measure; here's the codepen: http://codepen.io/anon/pen/ezJQjM
From http://css3.bradshawenterprises.com/animating_height/
Instead of using 100%, just "let it" get the auto value by not restraining it.
NOTE: 100px is just "any number bigger than the actual size"
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.maxHeight != '0vh') {
ele.style.maxHeight = '0vh';
} else {
ele.style.maxHeight = "100vh";
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
padding-left: 20px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
EDIT: Changed everything to VH (viewport height) so it will never grow bigger than 100% of the screen height and will adapt to the max height of any screen.
Also switched the "style="max-height: 0vh;" to the element itself instead of the class, so you could be unsetting it with ele.style if needed (otherwise you will need to set a new value to override the class.
Are you willing to use jQuery? It offers some cool animation possibilities, and may accomplish what you are trying to do. This is just a possible alternative to your approach.
Check out my fiddle here:
https://jsfiddle.net/3mo28z1t/11/
<div class="main" id="clicker">
Expand
</div>
<div class="secondary" id="expandable">
number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
$( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
function(){
$("#clicker").click(function () {
$(".secondary").toggle("slow");
});
});
});
</script>
The problem is caused by switching units of measure, so from pixels to percent. I would probable do it a little differently though.
growDiv = function(id) {
document.getElementById(id).classList.toggle('expanded');
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
transition: max-height .5s ease;
overflow: hidden;
padding-left: 20px;
max-height: 0;
cursor: pointer;
}
.secondary.expanded {
height: 100%;
max-height: 100px;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
You'll notice the JS is a bit simpler, and it relies more on the CSS.
Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.
Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?
Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});
I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...
This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>
It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}
The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?
<div id="post-cont">
<img id="post-img-1" class="post-img" src="small.jpg"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.
CSS3 only
http://jsfiddle.net/SPmj5/7/
<div id="post-cont">
<img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
#post-cont {
position: relative;
}
#post-cont img,
#post-cont span {
display:block;
-o-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-webkit-transition: opacity .7s ease;
transition: opacity .7s ease;
}
#post-cont img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#post-cont span {
position: absolute;
top: 100px;
left: 80px;
opacity: 0;
}
#post-cont:hover img {
opacity: 0;
}
#post-cont:hover span {
opacity: 1;
}
Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition
Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..
https://api.jquery.com/fadeToggle/
So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"