The demo is quite simple, and similar to the example in the Vue.js docs.
new Vue({
el: '#demo',
data: {
show: true
}
})
p {
width: 100px;
border: 1px solid red;
}
.fade-enter-active,
.fade-leave-active {
transition: all 5s;
}
.fade-enter {
opacity: 0;
width: 500px;
background: red;
}
.fade-enter-to {
background: black
}
.fade-leave {
opacity: 0;
background: red
}
.fade-leave-to {
background: black;
width: 1000px;
opacity: 1
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
The question is, when the leave animation begins, it seems it's removed from the DOM (v-if is false) so quickly that there isn't any animation at all!
But, if I remove opacity, the animation works! Why does opacity matter?
.fade-leave {
/* opacity: 0; */
background: red;
}
.fade-leave-to {
background: black;
width: 1000px;
/* opacity:1; */
}
There is another question, I thought the leave animation should be that the DOM background becomes red firstly (while the result is it didn't or I just can't tell), then change to black slowly. So, is it my misconception？
The opacity is important because the animation is fading according to it.
Here I have added to opacity of 0 directly to the class fade-enter-active of the button Hello. You can see the animation fading step by step.
Instead, with an opacity of 1, there is no direction to your fading. It stays at 1.
Related
I see a lot of answers say to use jquery-ui animate() function, but this requires an import of an entire other library just to flip colors.
Is there a way I can stick with just jQuery and CSS only?
The problem: When I click a button, I would like another element to flash color to blue, then back to red (red is original color). Each time the user clicks the button, this color change behavior will repeat.
I have been able to get it to change colors to blue:
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
});
Is there a way I can do the same for changing the color back to red? Something simple like:
$(".my-button").click(function() {
$(".other-element").css("transition", "color .3s").css("color", "blue");
$(".other-element").css("transition", "color .6s").css("color", "red");
});
... Where the element changes to blue after .3s, and then back to red after .6s? Note, the above code doesn't work, it only shows red (never changes to blue).
I propose to do without third-party libraries at all. Here I create a css animation and with the help of a simple js code I add an animating class at the beginning, and then remove it at the end of the animation.
const button = document.querySelector('.my-button');
const other = document.body;
button.addEventListener('click', function() {
other.classList.add('active');
});
other.addEventListener('animationend', function() {
other.classList.remove('active');
});
body {
margin: 0;
background-color: #f00;
display: flex;
min-height: 100vh;
}
.my-button {
margin: auto;
background-color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
transition: .2s;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}
.my-button:hover {
background-color: #ddd;
}
.active {
animation: bganim .6s;
}
#keyframes bganim {
0,
100% {
background-color: #f00;
}
50% {
background-color: #00f;
}
}
<button class="my-button">Click me</button>
I have two divs that appear like this:
The idea is that when you close the bottom div (click on the 'X'), it should disappear.
And when you close the top div, it should disappear, and also the bottom div should slide up and take its place.
I'm very new to jQuery, but this is my first attempt:
function initAnnouncements() {
$(document)
// Closes announcement modules
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
}
#keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
.1%{
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.announcements-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
width: 300px;
/* align-items: flex-end; */
}
.announcements-1 {
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
}
.announcements-2 {
/* animation: 0.4s ease-out 0s 1 slideInFromRight; */
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
animation-delay: .4s;
margin-top: 15px;
}
.annoucements-header {
background-color: #1481C3;
color: #ffffff;
font-family: "Proxima Nova Bold";
padding: 7px 10px;
}
.annoucements-close {
position: absolute;
right: 5px;
width: 24px;
height: 36px;
cursor: pointer;
opacity: .85;
}
.annoucements-close:hover {
opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
content: '';
width: 24px;
height: 2px;
background: white;
position: absolute;
top: 7px;
left: 0;
}
.annoucements-close::before {
transform: rotate(-45deg);
}
.annoucements-close::after {
transform: rotate(45deg);
}
/*opened or closed*/
.announcement-div-opened {
display: none;
}
.announcement-div.opened .announcement-div-opened {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="announcements-container">
<div class="announcement-div announcements-1">
<div class="annoucements-header">
<span class="annoucement-type-quantity">2 School Announcements</span>
<i class="annoucements-close"></i>
</div>
</div>
<div class="announcement-div announcements-2">
<div class="annoucements-header">
<span class="annoucement-type-quantity">1 Admin Announcement</span>
<i class="annoucements-close"></i>
</div>
</div>
</div>
</body>
As you can see this isn't doing anything. I'm trying to toggle the class from 'open' (display:block) to 'closed' (display:none) when the annoucements-close <i> element is clicked on.
And ideally I would like for the second div to slide up when the top one is closed, but first I'd just like to get either one to disappear.
What's wrong with my code where that's not working as expected?
Link to JSFiddle
There are 2 issues with your code: the click() event is inside the function initAnnouncements that doesn't get called. You could move it outside of this function or call the function. Then you have issues with your selectors: It's
.on('click', '.annoucements-close', function () {
$('.announcement-div').hide();
})
instead of
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
for class selectors. Working Fiddle.
If you just want to hide the annoucement which was clicked upon, just change it to
.on('click', '.annoucements-close', function () {
$(this).closest('.announcement-div').hide();
})
I looked at your code and adjusted it a little to demonstrate:
Added your common class on the two announcements "announcement-div"
Attached the document click handler with the jQuery ready event
Used the delegated event selector to listen to clicks within the document that match that common selector
On click of one of the announcement-div's animate the height to 0 and then remove the element
Comments are included in the fiddle. Hope this is helpful!
// Fire this function when the document is ready
$(function() {
// Listen on the whole document for click events on the .announcement-div element
$(document).on('click', '.annoucements-close', function () {
// From the close button find the closest parent "announcement-div"
var annoucement = $(this).closest('.announcement-div');
// Function to run after animating the element (use .hide() to keep element but display:none)
function destroy() {
annoucement.remove();
}
// Animate the annoucement's height to 0 over 400ms and then call the destroy function
annoucement.animate({ height: "0px" }, 400, destroy);
});
});
Updated JS Fiddle
I am attempting to have a rollover effect have 1-3 different colors in Sass. How would I do this? Here's my code so far..
input[type=submit] {
font-size:1.3em;
padding:5px;
font-family:$paragraphFont;
width:400px;
border:1px solid #888;
box-sizing:border-box;
margin-top:15px;
cursor:pointer;
transition:background-color .2s ease-in-out;
&:hover {
cursor:pointer;
background-color:#3cde77;
}
}
<form>
<p>Name:</p><input type="text" />
<p>Email:</p><input type="text" />
<p>Message:</p><textarea></textarea>
<input type="submit" value =" Send Message" />
</form>
I image you could use the random() function somehow and assign my colors to a number but I don't know how.
Any thoughts guys?
What You can do is a random function of SCSS
$repeat: 10; // 10 iterations
input[type=submit]{
#for $i from 1 through $repeat{
&:nth-child(#{$i}) {
background-color: rgb(random(255),random(255),random(255));
}
}
}
I was able to do this using JS. It randomly picks from 3 different colors each time your hover over the Send Message button. It then reverts to an initial grey color.
var send = document.querySelector('.send');
send.addEventListener("mouseover", function() {
var colors3 = ["red", "green", "blue"];
var randomColor = colors3[Math.floor(Math.random() * 3)];
this.style.backgroundColor = randomColor;
});
send.addEventListener("mouseout", function() {
this.style.backgroundColor = "darkgrey";
});
input[type=submit] {
font-size: 1.3em;
padding: 5px;
font-family: $paragraphFont;
width: 400px;
border: 1px solid #888;
box-sizing: border-box;
margin-top: 15px;
cursor: pointer;
transition: background-color .2s ease-in-out;
background-color: darkgrey;
}
<form>
<p>Name:</p><input type="text" />
<p>Email:</p><input type="text" />
<p>Message:</p><textarea></textarea>
<input type="submit" class="send" value=" Send Message" />
</form>
http://codepen.io/anon/pen/ryowjZ
This is not a complete solution, and I'm sure it's not a good solution, but it is a pure CSS solution: http://codepen.io/anon/pen/oZJqxR
The idea is that you have your button constantly cycling background colors with a CSS keyframe animation, but hidden behind a mask. When you hover, the mask is removed and the animation is paused, giving you a 'frozen' color that is picked based on where the cycle is when your mouse enters the button.
HTML:
<button><span>Hover me</span></button>
The CSS
button {
padding: 0.5rem 2rem;
border: 1px solid #CCC;
font-size: 1.5rem;
background: pink;
position: relative;
-webkit-animation: cycle 1s steps(3) infinite;
animation: cycle 1s steps(3) infinite;
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #DDD;
}
button span {
position: relative;
z-index: 1;
}
button:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
button:hover:after {
display: none;
}
#keyframes cycle {
50% {
background: blue;
}
100% {
background: green;
}
}
This currently isn't picking cleanly between the 3 stated colors - some intermediate colors are shown. This is down to the keyframe animation and the steps declaration on the button - I'm sure it can be done, but it requires fine-tuning.
Last caveat - this is way more resource intensive than just picking a colour with javascript - it would get very heavy if you had more than a couple of these elements on a page at once.
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease-in-out;
}
.box:hover {
background: yellow;
}
<div class="box"></div>
If the cursor is over the .box for less than a second, the transition stops and falls back to it's original phase.
Is there a way to somehow force the whole animation, regardless of hover duration?
fiddle
Edit: Similar solution but relying on transition and animation: https://jsfiddle.net/ok7pnrsL/
This is my solution: https://jsfiddle.net/9yu0cozq/1/
Basically you need to add a container for the box and then play with CSS animations.
<div id="container">
<div class="box"></div>
</div>
When the mouse enters the .box then the hidden container appears (please note that for this to work that container should have enough width and height to fit the whole area where the mouse might go).
This container creates an animation for itself to "hide" back in 1s. and while it is shown the .box has an animation for the same time.
#container {
position:absolute;
z-index:1;
width: 0;
height: 0;
}
#container:hover{
animation-name:changeSize;
animation-duration: 1s;
}
#container:hover .box{
animation-name:changeColor;
animation-duration: 1s;
}
.box {
z-index:0;
position:absolute;
width: 100px;
height: 100px;
background: red;
transition:1s background;
}
.box:hover {
background: yellow;
}
#keyframes changeColor {
0% {
background: red;
}
100% {
background: yellow;
}
}
#keyframes changeSize {
0%,99% {
width: 100%;height: 100%;
}
100% {
width: 0;height: 0;
}
}
So, without knowing the real context, this solution gives a series of assumptions that might or might not fit your exact case but gives an idea of how to solve it using pure CSS.
I think you heave to use JS for this. First you need to create animation for background change, and and then you can set it as class and add that class on hover, and remove it when animation ends or on webkitAnimationEnd.
$('.box').hover(function() {
$(this).addClass('animate');
$(this).on('webkitAnimationEnd', function() {
$(this).removeClass('animate');
})
})
.box {
width: 100px;
height: 100px;
background: red;
display: inline-block;
margin: 10px;
}
.box.animate {
animation: changeColor 2s linear;
}
#keyframes changeColor {
0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
I don't think you can do this without javascript, but it would be interesting to find out.
A light weight javascript solution could be something like this:
// Get the elemnt
var myDiv = document.getElementById('box');
// Detect hover
myDiv.onmouseover = function() {
// Add a force class to the element
myDiv.className += " force";
// Reset the cass name after 1sec (100ms)
setTimeout(function(){ myDiv.className = "box"; }, 1000, myDiv);
}
Change your markup slightly to make things easier for now:
<div id="box" class="box"></div>
And add an extra class to your css styles along with the hover state:
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease-in-out;
}
.box.force,
.box:hover {
background: yellow;
}
Check the jsfiddle
I have a blockquote like this:
<blockquote class="spoiler">Soopah sekkrit!</blockquote>
I want to make it hidden, only showing it if the user hovers over it. I'm doing it now with JS:
blockquote.addEventListener('mouseover', function() {
this.style.height = this.offsetHeight + 'px';
this.dataset.contents = this.innerHTML;
this.innerHTML = '';
});
blockquote.addEventListener('mouseout', function() {
this.style.height = '';
this.innerHTML = this.dataset.contents;
});
Is there a better way to do this, with CSS?
It has to keep its background-color, size, and work for contents with custom colors. If possible, I'd also like to animate it so the contents fade in gradually.
Here's something very similar to what I use in SOUP:
.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }
.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<blockquote class="spoiler">
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler">Even nested spoilers work!</blockquote>
</blockquote>
This is somewhat simpler than your own solution, and works for arbitrary content including images and even nested spoilers! (See demo snippet above.)
Alas, this method seems to suffer from weird transition effects on Chrome if any of the child elements of the spoiler have color: inherit. (Basically, what's happening is that these elements will have both their text color set to transparent and their opacity set to 0. Because opacities combine multiplicatively, the combined transition will thus appear slower — halfway through the fade-in, when the element itself is at 50% opacity, the text in it is at 50% × 50% = 25% opacity.) I've added an extra CSS rule to the example above to fix this, but it does make things a bit complicated.
What I actually do in SOUP is slightly different. I wrap the contents of each spoiler in an extra inner <div>, which lets me simplify the CSS further to just:
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
The main advantages of this method are simplicity and robustness: I don't have to use :not() selectors, improving compatibility with older browsers, and the transition styles can't conflict with other transitions possibly defined on the elements inside the spoiler. This method also doesn't suffer from the color transition weirdness on Chrome described above, since it only uses opacity transitions.
Overall, this is the method I recommend. The disadvantage, of course, is that you need to include the extra <div>s in your HTML.
Ps. Please consider also providing some way to make the spoilers permanently visible, especially for touch screen users who may find it very hard to "hover" the cursor over an element. A simple solution is to use a JavaScript click event handler to toggle the spoiler class, e.g. like this (using jQuery):
$('.spoiler').on( 'click', function (e) {
$(this).toggleClass('spoiler');
e.stopPropagation();
} );
$('.spoiler').on( 'click', function (e) {
$(this).toggleClass('spoiler');
e.stopPropagation();
} );
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
or, if you'd prefer to use delegated event handling (so that you don't have to keep adding new click handlers every time you load new content that includes spoilers via Ajax):
$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
$(this).toggleClass('spoiler').toggleClass('spoiler-off');
e.stopPropagation();
} );
$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
$(this).toggleClass('spoiler').toggleClass('spoiler-off');
e.stopPropagation();
} );
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
(These should work with either of the CSS variants shown above.)
Yes, this is possible with CSS. Essentially, you want to make all of the contents be invisible. In CSS, this means transparent.
First use the hover pseudo-class inside the not pseudo-class:
.spoiler:not(:hover)
But we also need to select all the child elements of the hovered spoiler, to set their colors and backgrounds:
.spoiler:not(:hover) *
And we set both the color and background (only for the child elements) to transparent to make them invisible to the user. All together:
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler:not(:hover) * { background: transparent }
code { padding: 2px; background: #bbb }
a { color: #00f }
Hover: <blockquote class="spoiler">Some stuff <a>and a colored link</a> <code>and some code!</code></blockquote>
We can also add a transition to make it smoother:
.spoiler { transition: color 0.5s } /* we have to put this outside the :hover to make it work fading both in and out */
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler * { transition: color 0.5s, background 0.5s }
.spoiler:not(:hover) * { background: transparent }
code { padding: 2px; background: #bbb; color: #000 } /* add color to prevent double transition */
a { color: #00f }
Hover: <blockquote class="spoiler">Some stuff <a>and a colored link</a> <code>and some code!</code></blockquote>
To make it obvious to the user that the blockquote is hoverable, you can add some text with the ::after pseudo-element to be shown when the blockquote isn't hovered:
.spoiler { transition: color 0.5s; position: relative } /* relative position for positioning the pseudo-element */
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler * { transition: color 0.5s, background 0.5s }
.spoiler:not(:hover) * { background: transparent }
.spoiler::after {
content: 'hover to view spoiler';
position: absolute;
top: 0; left: 0;
color: transparent;
}
.spoiler:not(:hover)::after {
color: #666;
transition: color 0.3s 0.3s; /* delayed transition to keep the text from overlapping */
}
code { padding: 2px; background: #bbb; color: #000 }
a { color: #00f }
<blockquote class="spoiler">
Some stuff <a>and a colored link</a> <code>and some code!</code>
<blockquote class="spoiler">Nesting bonus!</blockquote>
</blockquote>
For stuff like images, svgs (tho inline SVG can be very granularly controlled), canvases, and all that fancy stuff, instead of color you'd have to use opacity. We can make it work with these by adding this:
.spoiler img { transition: opacity 0.5s, background 0.5s }
.spoiler:not(:hover) img { opacity: 0 }
Here's a strategy that works pretty well, looks nice, and has pretty clean transitions
.spoiler {
position: relative;
display: inline-block;
cursor: help;
}
.spoiler::before {
content: 'psst\02026'; /* … */
position: absolute;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border-radius: 1px;
font-size: .9rem;
color: #e6578c;
background: #ffe5e5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 1;
transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
}
.spoiler:hover::before {
opacity: 0;
transform: translateY(-50%)rotateX(80deg);
transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
}
If you style the parent block with opacity: 0 without hover, then you can't add any styles to illustrate what part of the page the user should be hovering over.
Instead, if we add a ::before element that covers up the child content, then we can fade it out on hover and still provide a visual indication of where to go.
Demo in Stack Snippets
.spoiler {
position: relative;
display: inline-block;
cursor: help;
}
.spoiler::before {
content: 'psst\02026'; /* … */
position: absolute;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border-radius: 1px;
font-size: .9rem;
color: #e6578c;
background: #ffe5e5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
}
.spoiler:hover::before {
opacity: 0;
transform: translateY(-50%)rotateX(80deg);
transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
}
/* demo styles */
blockquote {
margin: 0
}
<p>
Inline Spoiler <span class="spoiler" > Word </span>
</p>
<p class="spoiler">
Paragraph Text Block of a Spoiler
</p>
<blockquote class="spoiler">
Block quote spoiler with super long text that wraps and wraps and wraps some more.
Block quote spoiler with super long text that wraps and wraps and wraps some more.
Block quote spoiler with super long text that wraps and wraps and wraps some more.
</blockquote>