Here is my code. http://jsfiddle.net/anastsiacrs/Lt7aP/1639/
[Please, run example in jsfiddle, stackoverflow's code does not run]
function XController($scope) {
$scope.model={isHidden:true};
}
.open-div{
background-color:red;
//height:260px;
}
.hidden-div{
background-color:green;
//height:60px;
}
.transformable {
-webkit-transition: 3000ms linear;
-moz-transition: 3000ms linear;
-o-transition: 3000ms linear;
-ms-transition: 3000ms linear;
transition: 3000ms linear;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
<p>{{isHidden}} </p>
<div ng-hide="model.isHidden" >
<div>Hello XXX</div>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
</div>
</div>
</div>
As you can see, without explicit height animation doesn't apply for this property. What is the possible way to solve this issue. May be there are some library or link, that will help me.
If height is directly setted to element, there is another one issue wiht div content. It is apper before div is fully expanded.
some tips will be very pleased
Have you tried changing the CSSheight to min-height? If the hidden div is bigger than the minimum height it will still expand. Should solve your issue.
Bootstrap collapse.js can be used here.
http://v4-alpha.getbootstrap.com/components/collapse/
Related
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..
UPDATE:
I have decided to use this approach:
HTML
<button type="button" class="btn btn-info" ng-click="save()">Update</button>
<div id = "alert_placeholder"></div>
JavaScript
$scope.save = function() {
$('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>Your information has been updated.</span></div>')
setTimeout(function() {
$("div.alert").remove();
}, 3000);
}
I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.
I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.
window.setTimeout(function() {
$(".flash").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
Try something like this
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
-webkit-transition: opacity 3.0s linear;
-moz-transition: opacity 3.0s linear;
-o-transition: opacity 3.0s linear;
transition: opacity 3.0s linear;
}
You need to put the fade and fade.in property onto your alert box and alert box hide though. - But just set the transition times for both to match what you need. Basically what you are doing here is setting the opacity, then the length of time it is taking to do this. The reason we have 4 different values all with different times are to make it cross browser compatible.
I've used this approach to implement blinking
In a directive
..
element.addClass("blink");
$timeout(function () { element.removeClass("blink");} , 600 , false);
..
and blink is defined with transition
.blink { background-color : orange; transition : all linear 600ms; }
I have decided to use this piece of code as an alternative update indicator
http://jsfiddle.net/deC37/
<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:
CSS:
<link href="./css/animate.css" rel="stylesheet" />
Javascript:
<script language="javascript">
$(function() {
$("a#home").click(function() {
animate(".box-a", 'rotateOutDownRight');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
HTML:
<!------- HOME PAGE ---------------------------------------->
<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p><a id="home" href="#pagina2">Box A will flash, click here!</a></p>
<a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a>
PAGE 2 W/O ANIMATION.CSS
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
<!----- PAGE 2 ----------------------->
<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p>PAGE 2</p>
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
URL: see an example here: http://apps.alfonsopolanco.com
jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.
Add 2 css rules that reference the desired transition from animate.css:
.customRotate.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
}
.customRotate.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
}
Then simply set the data-transition attribute on the anchor tag to the name of your new transition:
<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a>
Here is a DEMO
UPDATE: To control the speed of the transition:
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}
$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});
When the button is clicked: the demo div collapses vertically (i.e. width = 0) which works fine. But I want to then increase the divbody div to fill the page i.e. span8. The JS code is there but I want to do it animation like when the demo div collapses.
Hopefully this should help you get an idea, I did not have a whole lot to go off of on your fiddle. But this should get you started.
jQuery
$('#hideBtn').click(function(){
$('#divbody').toggleClass('span4');
$('#divbody').toggleClass('span8');
$(this).parent().toggleClass('span2');
$(this).parent().toggleClass('span1');
});
CSS
#divbody {
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>
<div id="demo" class="collapse in width">
<div style="width: 400px;">
<p> This should collapse vertical (by width)</p>
</div>
</div>
</div>
<div id="divbody" class="span4">
Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
</div>
</div>
</div>
Example
http://www.bootply.com/90126
Another example with the button below instead of to the side..
http://www.bootply.com/90128
http://stadskoll.nu/restaurang.php
If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.
To clarify, I want to know what's causing this "shaky" effect and be able to remove it.
HTML :
<!--VAL1-->
<div id="val1">
<div id="information">
<namn>
</namn>
<br>
<a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
<br>
<div id="star2" style="background-position:0 -0px">
<div id="stars1">
<div class="first" onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
<div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
<div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
<div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
<div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
</div>
</div>
<div id="txt"></div>
<br>
<br>
<information></information>
</div>
<div id="bilder">
<img src="" />
<br/>
<img src="http://stadskoll.nu/bilder/karta.jpg" />
</div>
</div>
CSS :
#val1 {
width:83%;
height:75px;
border-top:1px;
border-top-style:groove;
margin-left:40px;
overflow:hidden;
padding-top:10px;
padding-left:20px;
-webkit-transition: all 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
-o-transition: all 0.5s ease-in-out; /* Opera */
}
JavaScript :
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>
The issue appears to be with the display:inline on the maincontentbox.
If you add vertical-align:top it will disappear.
What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.