I am trying to override WP Bakery's tab animations, which slides content vertically in and out of view. I am a front end designer with limited JS experience. The site runs a theme, but from what I can tell in the code, the tabs and animations are coded as Bakery components.
Just looking for some code to override this thing! Reference to this ability seems to be completely unavailable elsewhere from my research. Thanks!
I was able to remove the vertical animation from the visual composer bakery tab and pageable container components by using this CSS. I had to specify top and bottom css classes depending on the position of the tabs. This example is verbose to show how to over-ride the vertical animating on all popular browsers. Essentially you need to set transform and transition to none on the .vc_tta-panel-body. I wanted to add a custom fade in effect to the panels so I added the fadein animation to the same css classes below the transform and transition over-rides.
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panel .vc_tta-panel-body,
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-bottom .vc_tta-panel .vc_tta-panel-body {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-sand-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Found this CSS snippit via Google which states:
.vc_tta-panel.vc_animating {
opacity: 0;
}
This hides the vertical animation, am also looking for a JS fix.
Related
I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout)
You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY
This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'
If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css
I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.
I make a code that workds to fadein, but to fadeout not working:
Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation
#menu-backdrop {
display: none;
animation:fadeOut 5s linear;
}
#menu-backdrop.exibir {
display: block;
animation:fadeIn 0.5s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
#keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0;
}
}
If anyone can post a work solution should be great, thank you very much guys.
Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.
A quick example:
const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );
button.addEventListener( 'click', event => {
event.preventDefault();
nav.classList.toggle( 'active' );
});
nav {
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: red;
transition: opacity .4s;
/* This should be set to 0, but to make the point
* of pointer-events clear, I will set it to slightly
* higher so you can see there's no interaction
* with the nav. */
opacity: .1;
pointer-events: none;
}
nav:hover {
/* If you can interact with the navigation,
* you will see it change color. */
background: blue;
}
nav.active {
opacity: 1;
pointer-events: all;
}
nav + button:before {
content: 'Open ';
}
nav.active + button:before {
content: 'Close ';
}
<nav></nav>
<button>Nav</button>
The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.
I have a less file that hide and display an element like the following:
.cmp-accordion__panel {
&--hidden {
display: none;
}
&--expanded {
display: block;
-webkit-animation: slide-down 0.5s ease-out;
-moz-animation: slide-down 0.5s ease-out;
}
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-5%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-5%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
In my JavaScript, I toggle the class name of the element between "cmp-accordion__panel--hidden" and "cmp-accordion__panel--expanded" if the event is triggered. I use keyframe and opacity to animate the transition from "display:none" to "display:block".
However, when I go from "display:block" to "display:none" to hide the element, the effect happens INSTANTLY. What should I add to animate the hiding?
As already said, is not possible animate or transition from display:block; to display: none; but this could be simulated in another way and is not necessary to use CSS animations, simply CSS transitions (in addition, is not necessary anymore to use vendor-prefixes to declare transitions or animations).
Please, look at this working example:
HTML (I inserted a fake content to create an element with a relative big height)
<div class="cmp-accordion__panel--expanded">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
LESS
[class*="cmp-accordion__panel"] {
border:solid 1px red;
overflow:hidden;
transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}
.cmp-accordion__panel {
&--hidden {
max-height:0;
opacity:0;
}
&--expanded {
opacity:1;
max-height:1000px;
}
}
Please note that, thanks to attribute partial value selector I added also some rules that apply to both *--hidden and *--expanded classes (I personally prefer a general class and an addition of a second one in some cases, instead of switching between two, but I did not want to change too much your approach).
The key rule is switching between two values of max-height property, from a 0 value to another "enough big" one. If you effectively know final height of the element you can simply use also height property, but in case of dynamic content, max-height did the trick.
Please note also the presence of overflow:hidden; applied to both classes, to simulate height changes.
Finally, animation effect relies only on a CSS transition applied to opacity and max-height properties, with different timings to enhance effect.
You cannot animate or transition from display: block; to display: none;, so you will need to remove this if you wish to animate it.
To ensure it fades and is removed you should animate the visibilty and opacity attributes.
Alternatively if you are using jQuery you can use the .fadeOut() function.
MDN - CSS Visibility
jQuery - fadeOut()
Is there any animation support in Angular Bootstrap? I'm not seeing any built-in way to slide a collapse element in, out, up or down. It just pops when activated.
There is currently no support for animation in the ng-bootstrap Collapse, however it looks like it's on the roadmap (source: https://github.com/ng-bootstrap/ng-bootstrap/issues/295).
As it stands, you can add animations by using CSS - please see this demo for an example.
I've added the following CSS to the collapse-basic component in the demo which will fade in/out the element when the Toggle button is clicked:
.collapse, .collapse.show {
display: block;
transition: all 1s linear;
}
.collapse {
opacity: 0;
height: 0;
}
.collapse.show {
opacity: 1;
}
I want to hide an HTML element when the page loads, then fade it in with a CSS transition. My plan is to set the opacity to 0, and then use a CSS animation to transform it to 1.
But I am worried that the content will remain hidden in old browsers that can't handle CSS transitions.
Is there a safer way to hide the content? Or to exclude this code from browsers that can't handle it?
As always, your problem is with older versions of IE.
http://caniuse.com/#feat=css-animation
I'm a big believer in progressive enhancement amd handling things CSS only.
Using Javascript could provide fallback for older browser or using libraries like Modernizr but I hate these kind of solutions and they come with there own problems. What if the visitor has JS disabled?
Luckily we can safely let older browser ignore the fade in animation. Just set opacity on 1 for the default div you want to fade in and start the keyframe animation at opacity set to 0.
div {
height: 300px;
width: 300px;
background-color: red;
opacity: 1;
animation: fadeIn 7s ease infinite;
}
#keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
https://jsfiddle.net/3rzL0xz8/
How can i display a easing effect, opening from the left, when the page is open? Like this site: http://focuslabllc.com/
I would use CSS transitions. Take a look at the example I've created http://jsfiddle.net/ZL9m7/1/
Relative CSS is simple as
.container {
opacity: 0.1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear; /* Play with timing functions */
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.container-ease-in {
opacity: 1;
}
And tiny javascript trigger (jQuery for convinience):
$(function() {
$('.container').addClass('container-ease-in');
});
Like in dfsq-answer the animation will be triggered with a class by js (this time without jquery):
window.onload = function() {
var oElement = document.getElementById('content');
oElement.className = oElement.className + ' start_animation';
};
And the css changes the margin and the opacity with transition(-duration):
#content {
...
/* starting status */
margin: 10px 200px 10px 0px;
opacity: 0;
/* now set the animation duration */
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
#content.start_animation {
margin: 10px 100px; /* change horizontal margins */
opacity: 1; /* change opacity */
}
Also see this example.
This is the fella who wrote the js for the site you're referencing. I played with CSS as an option for this but ended up just going with jQuery 100%. I'll have a blog post soon about some of the dev aspects of our new site facelift and I'll talk about how we did that. It will inclue some jsFiddle demos etc.
You can hide your content initially (with CSS) and then, once the page content is loaded, use javascript to trigger/run an easing operation to make things visible.
Or, you can start with no content and build the page content with javascript in a way that reveals it with the easing you want.
You can use JQuery animation or YUI transition to achieve this. Hide the div and show it OR set the width to 0 and then animate it to maximum with a specific duration.