I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
The css animation code isn't working. When #tools_button is checked, I want #tools_hidden to become visible and move from top:0% to top:6% smoothly.
Here is the code:
#tools_hidden {
position: fixed;
left: 10%;
top: 0;
display: none;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked~#tools_hidden {
position: fixed;
left: 10%;
top: 6%;
display: block;
}
<div id="tools">
<span>
<input type="checkbox" id="tools_button">
<label for="tools_button">
<img src="img/tools.png" id="tools_icon" alt="">
<span id="tools_label">
Tools
</span>
</label>
<span id="tools_hidden">
this is hidden
</span>
</span>
</div>
Scripts are strictly restricted for my project. So, please don't think of adding scripts.
You can use animate opacity instead of display to get the effect you want:
#tools_hidden {
position: fixed;
left: 10%;
top: 0;
opacity: 0;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked~#tools_hidden {
position: fixed;
left: 10%;
top: 6%;
opacity: 1;
}
<div id="tools">
<span>
<input type="checkbox" id="tools_button">
<label for="tools_button">
<img src="img/tools.png" id="tools_icon" alt="">
<span id="tools_label">
Tools
</span>
</label>
<span id="tools_hidden">
this is hidden
</span>
</span>
</div>
Maybe it's not possible to do with display property.
So, I've changed the first position of div to -6% and removed both display: none and display: block.
Here is the new css code:
#tools
{
height:6vh;
background-color:#747474;
font-size:5em;
}
#tools_icon
{
height:90%;
width:5vh;
}
#tools_hidden
{
height:6vh;
background-color:#747474;
font-size:1em;
position:fixed;
left:10%;
top:-6%;
-webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */
transition: top 0.5s;
}
#tools_button:checked ~ #tools_hidden{
position:fixed;
left:10%;
top:7%;
}
The HTML code is still the old one.
Okay, so im learning html and css, so im relativly new to this. I have followed many youtube videos to create different layouts. However, I am having real trouble in with this particular tutorial that i followed (https://www.youtube.com/watch?v=Wwe2zOz030o).
In this tutorial it shows how to make a really cool nav bar using the css transition effect, however, when the window is resized and i hover to expand a div it moves all of the other divs down the page. i want the divs to remain in the container at all times whatever the size of the window. i'm hoping this is really simple...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#import url("styles.css");
</style>
</head>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO </p>
</div>
</a>
<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>
<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</div>
</body>
</html>
the CSS styles are...
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}
.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}
.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}
.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}
.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}
It is a good case to use "flexbox".
Please take a look at your code with implemented flexbox:
http://codepen.io/Nargus/pen/uymsI
I added only display: flex; and overflow:hidden; to #container.
Also added min-width for each menu item (the same as width) so that flexbox knows its limits.
Width in .menu*:hover may be as big as you wish, all extras will be cut by flexbox itself.
Flexbox is ok on all modern browsers: http://caniuse.com/#feat=flexbox
I've been trying to create a very simple gallery with a main image and three thumbnails down the right side, which when hovered over will display themselves as the main image. I used a found jfiddle and tried to edit it for my own needs but seem to have agot a bit mixed up along the way! This is my first time using css transitions to create something like this so it could quite possibly be something very obvious - i just can't see it.
The code I have is as follows:
<div id="gallery">
<div class="thumb" id="thumb-1"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-main.jpg" /></div>
<div class="thumb" id="thumb-2"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-main.jpg" /></div>
<div class="thumb" id="thumb-3"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-main.jpg" /></div>
</div>
#gallery {
position: relative;
width: 470px;
height: 350px;
float: left;
margin: 0 35px 20px 0;
}
#gallery .thumb img {
height: 110px;
width: 110px;
}
#gallery .main img {
height: 350px;
width: 350px;
}
#gallery .thumb {
cursor: pointer;
left: 357px;
position: absolute;
display: block;
width: 112px;
height: 112px;
border: 1px solid #6d6d6d;
}
#thumb-2 {
top: 117px;
}
#thumb-3 {
top: 234px;
}
#gallery .main {
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
position: absolute;
border: 1px solid #6d6d6d;
}
#gallery .thumb:hover + .main {
opacity:0;
}
Hovering on the thumbnail should show the corresponding image in the main view. But you're doing it reversely (which hides the image in the main view with opacity:0). So try changing it like this:
#gallery .main {
opacity: 0; /* changed 1 to 0 */
...
}
/* always show the first initially */
#gallery > .main:nth-of-type(2) {
opacity:1;
}
#gallery .thumb:hover + .main {
opacity:1; /* changed 0 to 1 */
}
Demo.
NOTE: The demo just solves your problem mentioned in the question. To make it an acceptable gallery, I think you have to change the layout (HTML code) if you want a pure CSS solution, otherwise you have to add more script code.
I'm trying to create little navigation bar that will stay on certain position of the page even the the user is scrolling through it. I'm a total noob so I started out using the css for a navigation button from the template that i'm using. But for the life of me I cannot figure out how to add two more buttons. I'm sorry if this is a supernoob question but I could really use the help. Thanks guys!
The website is www.muzedimage.com
this is what I have in mind: http://i.imgur.com/oN6osxv.jpg
The HTML segment for the button is:
<div class="downArrow">
<div class="row">
<div class="large-1 small-2 column push-11">
<i class="icon-chevron-down"></i>
</div>
</div>
</div>
The CSS Style Sheet:
section.banner {
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
section.banner .downArrow {
float: right;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
text-align: center;
}
section.banner .downArrow a.down {
float: left;
width: 50%;
height: 60px;
background: #cb7039;
text-align: center;
}
section.banner .downArrow a.down i {
color: white;
font-size: 1.688em;
line-height: 60px;
-webkit-transition: line-height 0.1s ease-in;
-moz-transition: line-height 0.1s ease-in;
-o-transition: line-height 0.1s ease-in;
transition: line-height 0.1s ease-in;
}
section.banner .downArrow a.down:hover i {
line-height: 80px;
}
Here is a little FIDDLE that can give you a start.
Spend your time playing with the CSS.
And add/style as many buttons as you want.
HTML
<div class='holder'>
<div class='button1'>X</div>
<div class='button1'>Y</div>
<div class='button1'>W</div>
<div class='button1'>Z</div>
</div>