I made a little accordion that I would like to animate.
I have the following code but the animation as written is not working and I don't know why.
I know it's somehow complicated to make the height to work, but I managed to find a work around using max-height.
I would like my div to have an animated width and height to make it feel like you unfold it.
The weird behaviour is that if you resize the window, everything seems animated...
document.getElementById("ping").onclick = function () {
console.log(this);
this.children[1].classList.toggle("active");
};
.content.active {
display: block;
max-height: 200px;
transition-property: width, max-height;
transition-duration: 400ms, 100ms;
transition-timing-function: cubic-bezier(0.305, 0, 0, 1.015);
transition-delay: 400ms, 100ms;
width: 40vw;
background: orange;
}
.content {
width: 0px;
max-height: 0px;
transition-property: width, max-height;
transition-timing-function: cubic-bezier(0.305, 0.000, 0.000, 1.015);
transition-duration: 400ms, 100ms;
transition-delay: 100ms, 100ms;
background: orange;
display: none;
}
.cat.active {
background: orange;
}
<section id="item0">
<div id="ping" class="cat">
<div class="title active" style="">
<a>Open</a>
</div>
<div class="content" style="">
<div>
<div class="images">
first test <br>
another
</div>
</div>
</div>
</section>
1.) Only apply the transition parameters to the initial state, not to the .active state/class.
2.) Don't use display:none and block, but instead transition between max-height: 0 and width: 0 and their ".active" values.
3.) To hide the overflowing contents (which would still be visible), apply overflow: hidden to the initial state
document.getElementById("ping").onclick = function () {
console.log(this);
this.children[1].classList.toggle("active");
};
.content.active {
max-height: 200px;
width: 40vw;
}
.content {
max-height: 0;
width: 0px;
transition-property: width, max-height;
transition-duration: 400ms, 100ms;
transition-timing-function: cubic-bezier(0.305, 0, 0, 1.015);
transition-delay: 400ms, 100ms;
background: orange;
overflow: hidden;
}
.cat.active {
background: orange;
}
<section id="item0">
<div id="ping" class="cat">
<div class="title active" style="">
<a>Open</a>
</div>
<div class="content" style="">
<div>
<div class="images">
first test <br>
another
</div>
</div>
</div>
</section>
Related
Hello i have found a nice javascript effect of box in
link 1
link 2
But it's for wordpress only.
Is it possible to make same slide box with Bootstrap and javascript/jquery?
This is a very simple example of recreating the slide down effect on the links you posted. It can be done fairly easily just using html and css.
<div tabindex="1" class="mainbox">
<h1>
This is a box with hidden content
</h1>
</div>
<div class="hidden">
<h2>
I am no longer hidden
</h2>
</div>
div {
width:500px;
height:200px;
background:#3c3c3c;
color:black;
}
.mainbox {
cursor:pointer;
position:relative;
z-index:1;
}
.mainbox:hover {
outline:none;
}
.hidden {
position:absolute;
top:0;
z-index:-1;
opacity:0.75;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
.mainbox:hover + .hidden {
top:200px;
-webkit-transition:top 1s;
}
https://jsfiddle.net/tz3vjLg7/
Try this; with this approach you can move the main container to any place you want, add margins, paddings, etc to main-container without having to also re position the sliding panels inside
.main-container {
position: relative;
margin-left: 50px;
}
.main-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: lightgrey;
z-index: 1
}
.slide-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: blue;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.main-container:hover .slide-panel {
opacity: 1;
transform: translateY(150px)
}
<div class="main-container">
<div class="main-panel"></div>
<div class="slide-panel">Slide Panel</div>
</div>
I try to make an effect that is executed by clicking on an item within the container, container slide to right/left and fade, after the content is faded it needs do be display hide to make place for new content.
The future header will be placed outside the container thus the header do not fade. Nothing i tried seem to work. Anybody any suggestions for this problem?
I will be implementing the effect on my website www.bartmulder.nl/beta1.0 so when you click on a photo the container whit all the photos will fade and slide before display none
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
Here's the jQuery / JavaScript way of accomplishing this too...
Simply just call animate on the element and specify what kind of animation, speed, and completion function (optional).
For the example below I am passing a JSON object to specify what actions to accomplish with the animation (which I removed from CSS), then after the animation it will trigger the element to not be displayed any longer.
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).animate({
opacity: 0,
marginLeft: -100
}, 1000, function() {
$(this).css("display", "none");
});
});
.box img {
margin: 0px auto;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
You must apply the class 'clicked' in the parent element '.container', not in the 'this', so use jQuery parent to access the parent element '.container' to add the clicked class in the correct element.
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).parent('.container').toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
If you want just the image go to other side
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
$(this).css('display','none');
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
I have this simple set of CSS animations that I want to run indefinitely. But for some reason, it only runs twice and stops.
Here's a CodePen example.
Here is how I implement it using Jquery (this is also seen on the code)
$('#slide1').one(animationEnd, () => {
$('#slide1').css('display', 'none').removeClass('animate-1')
$('#slide2').css('display', '').addClass('animate-2')
})
$('#slide2').one(animationEnd, () => {
$('#slide2').css('display', 'none').removeClass('animate-2')
$('#slide3').css('display', '').addClass('animate-3')
})
$('#slide3').one(animationEnd, () => {
$('#slide3').css('display', 'none').removeClass('animate-3')
$('#slide1').css('display', '').addClass('animate-1')
})
See that #slide3 should revert to #slide1 for animation. It did, but it stops after 2 cycles.
You have defined counter variable as const, but it needs to be let to allow later reassignment.
let counter = 0;
Also you need to use $.on instead of $.one when binding to the animation end. $.on is used to bind handler to some event (every time it occurres), while $.one is used for one time binding only (run the handler first time the event occurres, but no more that that).
Here is your updated example:
https://codepen.io/anon/pen/WXNOKQ
answer already given and accepted, this is only for infos since the javaScript takes only three boxes into account.
animation-delay can be used to keep animation looping infinitly:
body {
color: #FFFFFF;
background-color: #27292d;
overflow: hidden;
background: #27292d url('bg.jpg') no-repeat fixed center;
font-family: 'Roboto', sans-serif;
}
.slider-container {
position: absolute;
right: 0;
top: 40%;
}
.slider-content {
position: relative;
font-size: 32px;
text-transform: uppercase;
}
.boxes {
float: left;
padding: 10px 20px;
margin: 5px;
position: relative;
}
.sub-box {
clear: both;
margin-left: 60px;
}
.sub-box span {
color: #000000;
padding: 10px 20px;
background-color: #FFFFFF;
}
.box1 {
background-color: #FF4F80;
}
.box2 {
background-color: #4CA2F0;
}
.box3 {
background-color: #53CEC8;
}
#keyframes heartbeat {
0% {
transform: translate(100px, 200px) scale(0)
}
50% {
transform: translate(100px, 200px) scale(0)
}
60% {
transform: translate(-100px) scale(1.5)
}
70% {
transform: translate(-100px) scale(1.5)
}
80% {
transform: translate(-100px) scale(1.5)
}
100% {
transform: translate(100px, -200px) scale(0)
}
}
.slider-single {
position: absolute;
right: 0;
width: 400px;
height: 50px;
margin: 20px;
transform: scale(0);
}
.animate-1 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -3s infinite;
}
.animate-2 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -1s infinite;
}
.animate-3 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s 1s infinite;
}
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single animate-2">
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single animate-3">
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single" style='display:none;'>
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single" style='display:none;'>
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
I'm trying create a hover effect which displays the text centered in the image, both vertically and horizontally. My main problem is that the text keeps staying on top of the image and when I try to navigate it using percentages or pixels, the entire hover effect background changes its proportion.
In this JS fiddle you can see what I'm doing, just hover over the left image in order to achieve the effect. The text just appears on the top, while it shouldn't.
JS Fiddle
<div class="container-fluid">
<div class="row " id= "faded">
<img src = "img/logo.png" class ="img-responsive" id = "logo">
<div class = "col-md-3 col-sm-3 col-xs-12" >
<img src = "img/1.jpg" class = "img-responsive" id ="left-image">
<div class = "carousel-caption" id = "pricing">
<h2>PRICING</h2>
</div>
<div class = "text">
HAIRCUT $45<br>
SHAVE $45<br>
COMBO $80<br>
</div>
</div>
<div class = "col-md-6 col-sm-6 col-xs-12">
<img src = "img/2.jpg" class = "img-responsive" id = "middle-image">
<div class ="carousel-caption" id = "about-us">
<h2> ABOUT US </h2>
</div>
<img src = "img/3.jpg" class = "img-responsive" id= "mid-image">
<div class ="carousel-caption" id = "contact-us">
<h2> CONTACT US </h2>
</div>
</div>
<div class = " col-md-3 col-sm-3 col-xs-12">
<img src = "img/4.jpg" class = "img-responsive" id = "right-image">
<div class ="carousel-caption" id = "appointments">
<h3> APPOINTMENTS </h3>
</div>
</div>
</div>
</div>
CSS Code used:
#logo{
height: 10%;
width:15%;
}
.col-md-6, .col-md-3{
padding-left:0px;
padding-right:0px;
}
.img-responsive{
margin-left:0px;
padding-left:0px;
}
#pricing{
bottom:89%;
left:-30%;
}
#about-us{
bottom:89%;
left: -55%;
}
#contact-us{
bottom: 39%;
right:-53%;
}
#appointments{
bottom:89%;
left:-15%;
}
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
#left-image:hover ~ .text {
opacity: 1;
}
in your css you need to add
padding-top: 50%;
like so -
.text {
background-color: rgba(212, 212, 212, 0.83);
position: absolute;
color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-top 50%;
text-align:center;
font-size:2.5em;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
pointer-events:none;
}
padding changes the distance from the border, from the inside out. see - http://www.w3schools.com/css/css_padding.asp
I am trying to add a collapsable element to my app. I don't want to use jQuery or any other dependency than Angular.
I have built a very simple demo here: http://jsfiddle.net/eg69cfub/2/
The elements are displayed/hidden properly the only problem is the transition.
I don't understand why it is so abrupt, I'd like it to be smooth.
How can I fix this please?
HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='isVisible = !isVisible'> Hello {{ test }}</div>
<div class='body' ng-class='{ collapsed: isVisible }'> Goodbye </div>
</li>
</ul>
</div>
</div>
CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.body {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
}
.collapsed {
min-height: 0;
height: 0;
}
JS:
var myApp = angular.module('myApp',[]);
function accordionCtrl($scope) {
$scope.isVisible = false;
}
In Angular, you can use ng-animate to perform smooth animations with ng-show directive (along with many other directives). Here is your fiddler with animations: http://jsfiddle.net/fu2jw6j1/
Your HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='$scope.isVisible=!$scope.isVisible'> Hello {{ test }}</div>
<div class='box' ng-show="$scope.isVisible" ng-animate="'box'"> Goodbye </div>
</li>
</ul>
</div>
And here's the CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.box {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
height: 20px;
}
.box-show-setup, .box-hide-setup {
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
-ms-transition:all linear 0.3s;
-o-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.box-show-setup { height: 0; }
.box-show-setup.box-show-start { height:20px }
.box-hide-setup {height: 0; }
.box-hide-setup.box-hide-start { height: 0px; }
You can find more about ng-animate directive in Angular's documentation: https://docs.angularjs.org/api/ngAnimate