Develop Reference

Vue transition within a transition ending the transition in the wrong place

I am trying to add a transition to a child div within another 'parent' div with its own transition, however there seems to be an issue with the child transition.
What appears to be happening is the child transition is getting confused with the parent transition and ending the transition in the wrong place.
The effect I am trying to get is when the button is clicked the Child Container A (in view) slides out left and Child Container B slides into view after Child Container A from the right.
I have replicated the issue here: https://codepen.io/BONDJAMES/pen/mdegmMe
How do I slide Child Container A out left, with Child Container B sliding into view after Child Container A, from the right, after a toggle?
HTML
<div id="app">
<div class="viewBlocks">
<transition name="slide">
<div class="left" v-if="!MaxView">
<div class="subContainer">
<div class="container">
...
</div>
</div>
</div>
</transition>
<transition name="slide">
<div class="right">
<div class="subContainer">
<button #click="toggleBtn">Toggle</button>
Parent DIV
<div class="container">
<transition name="first-slide">
<div v-if="!showMiniB" class="miniContainerA">
<button #click="slideDivs">Slide A out - B In</button>
Child Container A
</div>
</transition>
<transition name="second-slide">
<div v-if="showMiniB" class="miniContainerB">
<button #click="slideDivs">Slide B out - A</button>
Child Container B
</div>
</transition>
</div>
</div>
</div>
</transition>
</div>
</div>
CSS
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.viewBlocks {
display: flex;
}
.viewBlocks > * {
flex: 1 1 0%;
overflow: hidden;
}
.viewBlocks .subContainer {
margin: 10px;
background-color: white;
min-height: 200px;
padding: 1rem;
/* prevent text wrapping during transition? */
min-width: 300px;
}
.viewBlocks .left {
background-color: blue;
}
.viewBlocks .right {
background-color: red;
}
.viewBlocks .container {
background-color: white;
}
.slide-leave-active, .slide-enter-active {
transition: 1s cubic-bezier(0.5, 0, 0.3, 1);
}
.slide-leave-to, .slide-enter {
flex-grow: 0;
}
.miniContainerA{
border: green 3px solid;
text-align: center;
height: 60px
}
.miniContainerB{
border: pink 3px solid;
text-align: center;
height: 60px
}
.first-slide-enter {
opacity: 0;
transform: translatex(-100%);
transition: all 0.7s ease-out;
}
.first-slide-enter-to {
opacity: 1;
transform: translatex(0);
transition: all 0.7s ease-out;
}
.first-slide-leave-to {
opacity: 0;
transform: translatex(-100%);
transition: all 0.7s ease-out;
}
.second-slide-enter {
opacity: 0;
transform: translatex(0);
transition: all 0.7s ease-out;
}
.second-slide-enter-to {
opacity: 1;
transform: translatex(-100%);
transition: all 0.7s ease-out;
}
.second-slide-leave-to {
opacity: 0;
transform: translatex(0);
transition: all 0.7s ease-out;
}
.second-slide-leave {
transform: translatex(-100%);
}
VUE
var app = new Vue({
el: '#app',
data: () => ({
MaxView: false,
showMiniB: false
}),
methods: {
toggleBtn(){
this.MaxView = !this.MaxView
},
slideDivs(){
this.showMiniB = !this.showMiniB
}
}
})

It's just a matter of adjusting the css a bit
for miniContainerA and miniContainerB (using just div in example below) you need to anchor to the top. You can do this by positioning the parent as absolute, and the children (miniContainers) relative
.viewBlocks .container {
background-color: white;
position: relative;
top: 0;
}
.viewBlocks .container div{
background-color: yellow;
position: absolute;
top: 0;
left:0;
width:100%;
}
then adjust your transition percentage (added 100% to your translatex values)
.second-slide-enter {
opacity: 0;
transform: translatex(100%);
transition: all 0.7s ease-out;
}
.second-slide-enter-to {
opacity: 1;
transform: translatex(0%);
transition: all 0.7s ease-out;
}
.second-slide-leave-to {
opacity: 0;
transform: translatex(100%);
transition: all 0.7s ease-out;
}
.second-slide-leave {
transform: translatex(0%);
}

How to display notification popup with animation appearing and decreasing from right top to bottom and closing from bottom to top

Currently, my notification popup work but I would like to do this animation without JS/JQuery (only animation). Also there is an issue with clicking. When you click outside when popup is open, then work normally. But if you click on this text OPEN, then ending animation won't work.
Animation appearing and decreasing from right top to bottom and closing from bottom to top. It should work in both directions but alternately. It currently only works when you want close popup.
JSFiddle
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Script
$(document).ready(function() {
$("#e_a_c").click(function(e) {
$("#t_1").toggle();
setTimeout(function() {
$("#t_1").addClass("tsc_1");
}, 1);
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#t_1 *')) {
$("#t_1").removeClass("tsc_1");
setTimeout(function() {
$('#t_1').removeAttr('style');
}, 150)
}
});
});
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>

Probably NOT the answer; more a starter.
I don't think you will reach your expectations with a full CSS solution, just because closing your menu by clicking outside of it can't be done without javascript.
Anyway, this is a working version with javascript / jquery
https://jsfiddle.net/piiantom/98sfoLcg/
I reworked the javascript part in order to have a functional event management.
The bugs you are refering to are fixed.
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function() {
$("#e_a_c").click(function(e) {
e.stopPropagation();
e.preventDefault();
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
} else {
$("#t_1").addClass("tsc_1");
}
});
$(document).click(function(e) {
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
}
});
});
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
For the full CSS version, this is a working version by using the checkbox input hack. But, the opening / closing is only managed by clicking on OPEN. Menu is not closed when clicking outside.
https://jsfiddle.net/piiantom/oht40Lk5/
Besides, all your menu is nested inside a <label>, which is not that good
HTML
<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
</label>
CSS
#e_a_c{
position: absolute;
opacity: 0;
cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

Description/Approach
I'm trying to merge the two pens:
https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens
and
https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false
Ideally, I would like to make the four sections appear in a quadrant-like form (two sections in the first row and two sections in the bottom row). Each section should have a collapsable listbox. When the user clicks on the listbox the section shouldn't expand as well. Clicks in the listbox and in the section should be independent.
Regarding the clicks I think I have to tell the toggleClass to ignore clicks on .collapsible. Not sure how.
$('.section').on('click', function(){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").collapsible({accordion: false});
Code
https://codepen.io/szeconku/pen/oqBPvO
I need to figure out how to make clicks in the listbox independent of the clicks in the section and how to add a second row. Any help is appreciated.

Codepen updated : https://codepen.io/anon/pen/oqBrbq
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").click(function(e){
e.stopPropagation();
});
.section {
background-size: cover;
position: absolute;
height: calc( 50% - 2px);
width: 50vw;
overflow: hidden;
/*#include skew(-10deg, 0deg);*/
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
border-left: 2px solid white;
border-right: 2px solid white;
cursor: pointer;
}
.section::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: #3498DB;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.section::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -15%;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 130%;
height: 100%;
opacity: 0.3;
z-index: -1;
-moz-transform: skew(10deg, 0deg);
-ms-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg);
transform: skew(10deg, 0deg);
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
overflow: hidden;
}
.section:hover {
width: 47%;
z-index: 30;
}
.section:hover::after {
background-size: 50%;
}
.section:hover:last-of-type {
left: 53%;
}
.section.expanded {
width: 100% !important;
left: 0px;
height: 100%;
z-index: 100;
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.section.expanded::after {
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
background-size: 50%;
background-position: left;
}
.section.expanded:hover:last-of-type {
left: 0px;
}
.section.expanded:hover::after {
background-size: 50%;
background-position: left;
}
.section-1 {
left: 0;
top: 0;
}
.section-1::before {
background-color: #1DB45D;
}
.section-2 {
left: 50%;
top: 0;
}
.section-2::before {
background-color: #3498DB;
}
.section-3 {
left: 0;
bottom: 0;
}
.section-3::before {
background-color: #9B59B6;
}
.section-4 {
left: 50%;
bottom: 0;
}
.section-4::before {
background-color: #F06D3A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="section-1 section">
<h1>Title 1</h1>
<div class="container">
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
<div class="collapsible-body">
<p>Bullet 1 text</div>
</ul>
</div>
</section>
<section class="section-2 section">
<h1>Title 2</h1>
</section>
<section class="section-3 section">
<h1>Title 3</h1>
</section>
<section class="section-4 section">
<h1>Title 4</h1>
</section>
</div>

prevent effect hover from occurring until previous effect has completed

Currently if I hover over an element it displays the animation I am looking for, and hides the other elements on the page.
The issue I am facing is that if I hover over many of the divs quickly it queues, and hides the divs one after an other. I want to just allow one div to be hidden when hovered on, and when all animations are complete allow the functionality work again.
See jsfiddle here
If you hover quickly over the divs you will see that they appear/disappear and this keeps repeating. I want more control over this, and to only allow the effect to happen again, once the animation is complete.
Please also see code below for convenience.
I tried adding
if(!$(".wrapper").is(":animated")){....
but unfortunately this didn't work.
html
<div class="box-1">
<div class="wrapper">
<div class="background-out label-1 label"></div>
<div class="background-over label-1 label"></div>
<div class="background-info">
<div class="text">Bla bla bla.</div>
</div>
</div>
</div>
<div class="box-2">
<div class="wrapper">
<div class="background-out label-2 label"></div>
<div class="background-over label-2 label"></div>
<div class="background-info">
<div class="text">Bla bla bla</div>
</div>
</div>
</div>
css
.box-1 {
position: absolute;
top: 40%;
left: 40%;
}
.box-2 {
position: absolute;
top: 10%;
left: 40%;
}
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-out,
.background-over,
.background-info {
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}
.background-info {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: #f8f8f8;
}
.background-info .text {
font-size: 12px;
letter-spacing: 1px;
text-align: center;
width: 80%;
margin-left: 10%;
margin-top: 5px;
}
.background-out {
transition-timing-function: linear;
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
opacity: 1;
}
.background-over {
background-color: transparent;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.label-1 {
background: yellow;
}
.label-2 {
background: pink;
;
}
.label {
animation-duration: 1s;
animation-name: slidein;
}
JS
$('.wrapper').hover(function() {
$('.wrapper').not(this).fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).fadeIn('slow');
});

You need to use the jQuery .stop() method to prevent the animations queuing.
https://jsfiddle.net/po34gv6v/11/
$('.wrapper').hover(function() {
$('.wrapper').not(this).stop().fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).stop().fadeIn('slow');
});
see: https://api.jquery.com/stop/

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">