Pointer-events animation not working on Safari - css

Is there any way to make the next code in Safari? Safari doesn't detect the a tag after hover.
.wrap {
width: 100px;
background-color: grey;
height: 100px;
}
.wrap:hover a {
pointer-events: none;
animation: pointerEvent 0s linear forwards .5s;
}
#keyframes pointerEvent {
100% {
pointer-events: auto;
}
}
<div class="wrap">
Demo
</div>
I need to delay the pointer-event because the a tag is inside a div which has a transformation animation on hover. If I do not delay the event, I can click over the a tag before the transformation ends.
The specific problem is in the footer here

I could not solve it only with CSS, I had to give up and add Javascript code

I had the same problem.
My Javascript solution:
4500 = animation-duration + animation-delay = 4.5 secondsYOURCLASS = Classname of the animation-container[0] = first occurrence of YOURCLASS
<script>
document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='none';
setTimeout(function(){ document.getElementsByClassName('YOURCLASS')[0].style.pointerEvents='YOURCLASS';}, 4500);
</script>

Related

CSS FadeIn and FadeOut trigerred by onclick with only css (100% pure) if not possible less resources as possible (no jquery, and no js to animation)

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.

CSS3 fade in without fade out - one way transition

I want to animate my html only with css. A list should fade in, if I add a class ti the element but should immediately disappear, if I remove the class.
I tried several things with transitions in css3. But i seems that all transitions are for both, mount and unmount of an element.
The magic trick is to remove the transition in the basic class an append it in the show class.
$("button").on("click", function(){
$("#container").toggleClass("show")
})
#container {
color: white;
background: #357700;
opacity: 0;
overflow: hidden;
transition: none;
}
#container.show {
opacity: 1;
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show/Hide</button>
<div id="container">
<p>Hello World</p>
</div>

How to disable CSS3 transitions when zooming?

When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.
Is there a way to use these transitions, but prevent the browser from using them only when zooming?
EDIT:
Sample HTML:
<div></div>
Sample CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
Code also available on jsFiddle.
I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.
It can't handle zooming initiated by using the menu, but its better than nothing.
HTML
<div></div>
CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
.zooming {
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
jQuery:
$(document)
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }})
.keyup(function(e) { $('div').removeClass('zooming'); });
Updated jsFiddle. Only tested in Chrome so far.
Try this solution:
http://jsfiddle.net/995zE/
It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.
This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});

Why only chrome (and maybe safari) works good with transition (height,width)?

I have a textarea, which stretches (makes height bigger) smoothly:
<style type="text/css">
textarea {
height:20px;
width:170px;
transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
textarea:focus {
height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
<textarea style="resize:none;padding:10px;"></textarea>
</div>
So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn't.
I tried to add transition to <div>, but without result..
Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)
So, I did it: I just add class "active" to <div> on focus of textarea, and on blur: remove class "active" from <div>. All transformations doing by this class, like
div {
height: 20px;
transition: all 0.2s linear;
}
div textarea {
height: 10px;
transition: all 0.2s linear;
}
div.active textarea {
height:30px;
}
div.active {
height:40px
}
It works very well.

How to keep css animation effect?

I have some slide animation in css. There is any chance to keep this effect?
#arch{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
}
#arch:hover{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
I'm guessing you mean to have to the element slide away on hover, and slide out when the mouse leaves? I suggest putting the :hover on the parent element:
*:hover > #arch{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
Depending on what the parent element is, you may need to wrap the #arch element in a <div>.
Also, you may need to use CSS transitions instead of CSS animations, so that the animation doesn't abruptly end on mouseout:
#arch{
-webkit-transition:width 1s;
width: 220px;
}
*:hover > #arch{
width: 0;
}
(Don't forget to include the other variations of the property for the other browsers)
Remove the :hover event and let it sit.

Resources