ng-if animation angularjs collapse - javascript

I've got a little issue using the animation in angularjs. I can expand and collapse a div but when i collapse it the content of the div disappear after the container collapse. It should be collapse together instead.. I made a jsfiddle here:
http://jsfiddle.net/7tb4g/119/
the css is very simple:
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
}
.animate-if.ng-enter {
max-height: 0;
opacity: 0;
}
.animate-if.ng-enter.ng-enter-active {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave.ng-leave-active {
max-height: 0;
opacity:1;
}
thanks

Simple fix with overflow:hidden;
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
/* no overflow during animation */
overflow:hidden;
}
DEMO

Related

How to remove scrollbar which is shown on using transform scale?

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>

Making animation on event trigger with Javascript and CSS

I am new using javascript and CSS and am currently trying to make a small animation that is triggered at event call. The animation is simple, and only changes the transparancy of an image. My problem is that that the animation only works every other time the function is called.
A function called "pulse()" is called every time I want the animation to happen.
<script>
function pulse() {
$('.transform').toggleClass('transform-active');
}
</script>
The CSS looks like this:
.lock-image {
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
}
}
The image on which the animation is done is done like this;
<div class="lock-image transform">
<img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
</div>
How can I change the code so the animation happens every time the function pulse() is called?
You can add an event handler to handle when the animation ends to remove the class. For the purpose of the example, I've changed the image to a red div
function pulse() {
$('.transform').addClass('transform-active');
}
$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$(this).removeClass('transform-active');
})
#myImage {
display: block;
background-color: red;
width: 100px;
height: 80px;
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
<div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>

Transition on image width does not work with window scroll

i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}

Carousel loose responsive behaviour with "image in div" zooming on hoover effect

Using flickity carousel I've created the following example here in codepen.io link. Here is CSS code I've implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The issue I can't figure out is that images loose responsive behavior only until I turn off this part:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
But in this case when you unhover the image returns back to it size very fast loosing the transition effect, can you please suggest how to figure out this issue?
1. Here the responsive behavior of image is present, but zoom effect on hoover loose transition.
2. In this example you can notice that transition works great, but if you resize the window images loose their responsive behaviour.
It happens because you said for the transition to apply on all actions, so the 10s transition happens also when the images change thier when the screen changes width.
You will need to change
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
to
-webkit-transition: -webkit-transform: 10s ease;
-moz-transition: -moz-transform 10s ease;
-o-transition: transform 10s ease;
-ms-transition: transform 10s ease;
transition: transform 10s ease;
And remove the transition from the :hover.
This will now work.
Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110

Bootstrap multilevel dropdown slide effect?

I have a multilevel dropdown in a Bootstrap project I made. I need it to be so that the dropdowns would slide. How am I to accomplish that?
I have the following code done, but I need to add to it. Here's what the code does:
It opens and closes the specific dropdown if you click its dropdown toggle.
If you click outside the dropdown, but inside its parent, only the child dropdown will close; and if you click outside the parent, the parent will close, and so on.
If you click on the dropdown toggle of a child dropdown, it will only affect that dropdown and its children, not its parents.
I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402
I'm sure it does more specifications, but you get the idea. Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/
For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. I want it all to work exactly like how I have it working now, except that it slides.
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
Your fiddle is not totally clear for me. Your navbar has no .navbar class and your nav menus no .navbar-nav.
You can try to add the CSS code like that shown below:
.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://jsfiddle.net/hhb9u7db/1/
resources:
Transitions on the display: property
http://davidwalsh.name/css-slide
For Bootstrap default navbar you can use the following Less code:
.dropdown-menu, .open > .dropdown-menu,
{
display:block;
max-height: 0;
overflow-y:hidden;
visibility:hidden;
transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
{
max-height: 500px;
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}
Which compiles with the autoprefix plugin into the following CSS code (lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"):
.dropdown-menu,
.open > .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://www.bootply.com/dd5aFlGTTE

Categories