I am starting my foray into Modals and the CSS I am using for the overlay, just doesn't seem to want to work. Any ideas what might be happening?
It is written in SCSS
#mixin transitionSupport($transition){
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
.modal-overlay{
position: fixed;
z-index: 998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
#include transitionSupport(1ms opacity ease);
background: rgb(0,0,0);
.modal-open{
opacity: 1;
}
}
HTML:
<div class="modal-overlay modal-open">
</div>
Link to the codepen
When I view the page itself, the page stays white. And I have no idea why.
Should the .modal-open{opacity:1} not override .modal-overlay?
Change .modal-open { to &.modal-open { to match class="modal-overlay modal-open".
As it's written currently, it's looking to match an element called .modal-open INSIDE .modal-overlay.
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I am trying to make a transition so when I click I button two divs are scaled from a small circle to a large circle. Basically that looks something like this when expanded:
This has gone from scale(1) to scale(20) and scale(25). When I click the button, the circles shrink with no problem. However, if I increase the scaling to for example scale(40) and scale(45) the result I get when clicking the button again (to shrink everything) looks like this:
So this happens right after I click. In this case I just have a transition-delay on so I could screenshot it.
The SCSS for the circles are like this:
.inner-circle-bg {
display: none;
width: 30px;
height: 30px;
border-radius: 100%;
position: fixed;
background: $primaryRed;
bottom: 35px;
right: 35px;
z-index: 999999;
transform: scale(1);
transition: transform 0.3s ease-in;
transition-delay: 4.1s;
&.is-active {
transform: scale(40);
transition: transform 0.3s ease-in;
transition-delay: 0.1s;
}
}
.outer-circle-bg {
display: none;
width: 30px;
height: 30px;
border-radius: 100%;
position: fixed;
background: $primaryRedDark;
bottom: 35px;
right: 35px;
z-index: 99999;
transform: scale(1) ;
transition: transform 0.3s ease-in;
transition-delay: 4.2s;
&.is-active {
transform: scale(45) ;
transition: transform 0.3s ease-in;
}
}
And then I just have some JS to toggle the is-active state when a button is clicked.
So yeah, any idea what might be causing this, and if there is a way to fix it ?
EDIT:
I now have a working JSfiddle illustrating the problem (although with a hover effect instead):
https://jsfiddle.net/47znjxwo/
I'm trying to apply a bottom to top, and top to bottom vue js transition. The bottom to top works on enter, but I get no transition on leave.
Here is my css transition:
.slide-details-mobile-enter-active {
#include transition(all 0.5s ease-in);
}
.slide-details-mobile-enter-active {
#include transition(all 0.5s cubic-bezier(0, 1, 0.5, 1));
}
.slide-details-mobile-enter-to, .slide-details-mobile-leave {
transform: translateY(0vh);
}
.slide-details-mobile-enter, .slide-details-mobile-leave-to {
transform: translateY(100vh);
}
The vue template looks like this:
<transition :name="detailsTransition">
<sc-fcst-details
v-if="viewDetails"
#changeactiveday="changeActiveFcstDay($event)">
</sc-fcst-details>
</transition>
The first element in the vue template has the following css:
#fcst-details {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow-y: hidden;
z-index: 4;
}
Any suggestions on why the leave transition does not work?
Also, I was hoping to use the top style instead of transform, but that wasn't working at all.
This seems to be working fine for me:
.details-transition-enter-active, .details-transition-leave-active {
transform: translateY(0vh);
transition: all 0.4s ease-in-out;
}
.details-transition-enter, .details-transition-leave-to {
transform: translateY(100vh);
}
Give it a go 🙂
Later edit (using top instead of transform):
.details-transition-enter-active, .details-transition-leave-active {
top: 0vh;
transition: all 0.4s ease-in-out;
}
.details-transition-enter, .details-transition-leave-to {
top: 100vh;
}
And then remove the top: 0 from #fcst-details.
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
I have a backdrop on my site that opens whenever it needs to. Modals, mobile nav etc.
I'd like to get the opacity of the backdrop to fade, however I can't get it to transition properly when the --open class is removed from the backdrop.
I've gone through a few iterations so any ideas on how to make it work AND be better css is appreciated.
Here's a demo demonstrating the ease effect occuring when --open is applied to the backdrop, but will not work when it is removed.
https://jsfiddle.net/p2yz0rvr/
For futures sake here's the code:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -9999999999;
opacity: 0;
text-align: center;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
background: #000;
transition: opacity 0.4s ease-out;
}
The problem is that you don't have a background set on the initial .backdrop state, the background is set on the element .backdrop--open.
Since you are only transitioning the opacity property, the transition doesn't occur when you remove the .backdrop--open class. Therefore you would need to move background to the initial .backdrop state in order for the transition to take place when removing the class.
Updated Example
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0;
text-align: center;
background: #000;
transition: opacity 0.3s ease-in;
}
.backdrop--open {
opacity: 0.75;
z-index: 2;
transition: opacity 0.4s ease-out;
}
As an alternative, you could also keep your initial code and just transition the background property in addition to the opacity property (without having to change where the background is set).
Keep in mind that the z-index property can be transitioned, so depending on what you're trying to achieve you may only want to target those two properties rather than using all.
Updated Example
.backdrop {
/* ... */
transition: background 0.3s ease-in, opacity 0.3s ease-in;
}
.backdrop--open {
/* ... */
background: #000;
transition: background 0.4s ease-out, opacity 0.4s ease-out;
}