First question here. Please bear if I missed out anything. I'll try to add more details as soon as mentioned.
In my angular project, I have regular login and register form components and want to implement the flip animation to transition between them.
On click, the parent div has a flip animation and it "flips" from one component "front" to another "back" and vice-versa. The problem is that since the "back" component goes through transform: rotateY(180deg); the component's form field and animations don't work properly.
Due to this, even simple hover animations did not work as expected.
How should I implement this transition for both components + animations to work as expected?
Thank you for your time!
I followed the flip animation method given here but it is probably works fine just for display data and has problems when we put in a component with animations to the "back" side.
Adding a gif for better understanding of the entire problem : Entire problem in working
It's difficult know what happens.
I imagine you have any kind of confict with the name of some class of there're a problem using position absolute in your cards. check the "z-index" of your class. (I feel that the "border" you see is the border or the input in "front" - try enclosed each "face" in a div with position relative-)
With this .css
.scene {
perspective: 600px;
max-width:400px;
margin:auto auto 1rem;
}
.card {
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
background: white;
}
.card__face {
float:left;
width:100%;
margin-right: -100%;
backface-visibility: hidden;
}
.card__face div{
padding:1rem;
background: white;
display:flex;
flex-direction: column;
backface-visibility: hidden;
}
.card::after{
display:block;
content:'';
clear:both;
}
.card__face--back {
transform: rotateY( 180deg );
}
.card.is-flipped {
transform: rotateY(180deg);
}
And this .html
<div class="scene">
<div #card class="card" [class.is-flipped]="toogle">
<div class="card__face card__face--front">
<div>
<mat-form-field appearance="outline">
<mat-label>Input front</mat-label>
<input matInput />
</mat-form-field>
<button mat-raised-button color="primary" (click)="toogle=!toogle">
click
</button>
</div>
</div>
<div class="card__face card__face--back">
<div>
<mat-form-field appearance="outline">
<mat-label>Input back</mat-label>
<input matInput />
</mat-form-field>
<button mat-raised-button color="accent" (click)="toogle=!toogle">
click
</button>
</div>
</div>
</div>
</div>
In this stackblitz that use material-angular looks like work
NOTE: It's necessary add in styles.css
.scene .mat-mdc-raised-button .mdc-button__label{
z-index: 0;
}
Because the raised-button add to the span a z-index:0
Related
I just want to skew the parent and skew it back on the child.
Example : HTML
<div class="parent"> <!-- skew(-10deg) -->
<div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
Example : CSS
.parent {
transform: skew(-10deg);
}
.child {
transform: skew(10deg);
}
Text inside seems ok with Firefox, Safari. But not Chrome and Opera its a bit blurry
I have to use -webkit-backface-visibility: hidden; for reduce box pixelated in Chrome
Firefox :
Chrome :
Firefox vs Chrome :
or zoomed by Photoshop
Live example : http://jsfiddle.net/1tpj1kka/
Any idea ?
NOTE !!! : web-tiki's answer is an another way solution to prevent the problem. But if any answered a real solution to resolved this skew back problem (real fix), I will accept the answer.
The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.
It will also alow you to use only one tag in your markup :
#import url(https://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}
.parent {
width: 300px;
overflow: hidden;
padding-left: 5%;
position:relative;
}
.parent::before {
content :'';
position:absolute;
top:0;left:0;
width:100%; height:100%;
background: rgba(90,190,230,0.9);
transform-origin:0 0;
transform:skew(-10deg);
z-index:-1;
}
<div class="parent">
Hello
</div>
Adding the 'translateZ(0)' before transformations like below forces the gpu to re-render the text and removes blurry-ness on Chrome.
This:
transform: translateZ(0) skew(-10deg);
Not This:
transform: skew(-10deg);
You can try the text-rendering: geometricPrecision CSS property. This will force your text to not be anti-aliased, thus making the blurriness less important.
inp.onchange = function(){
document.querySelector('.child').classList.toggle('geo');
}
#import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight:bold;font-size:50px;font-family:'Oswald',sans-serif;}
.geo{
text-rendering: geometricPrecision;
}
.parent {
transform: skew(-10deg);
-webkit-backface-visibility: hidden;
width:300px;padding-left:15%;margin-left:-15%;overflow:hidden;
}
.child {
transform: skew(10deg);
width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%;
}
<div class="parent"> <!-- skew(-10deg) -->
<div class="child geo">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
<input type="checkbox" id="inp" checked="true"/> geometricPrecision
I have a button in React and when I hover over it a funky saw animation happens. However, the effect I truly want is for the H1 tag on the page to have the saw animation in the background occur when I hover over the button. Yet, whenever I add a className and try to target that in the button:hover css, I get no effect. I've tried .btn:hover h1 and .btn:hover."classname" and a number of other combinations. yet none work.
How can I target a class, div, or h1 when hovering over a button that is not directly connected to the class, div, or h1 that will have the effect?
The current CSS I'm using for this, which works for the button itself, is:
.btn {
color: black;
}
.btn:hover {
animation: sawtooth 0.35s infinite linear;
background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em
, linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em;
color: adjust-hue($color,180);
}
#keyframes sawtooth {
100% {
background-position: 1em 0;
}
}
The template I have is:
return (
<div className="App">
<h1>Question Genie</h1>
<button className="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
{questions}
</div>
);
}
}
You can use a next sibling selector (~) and flexbox column-reverse to accomplish this. The main issue here is that there is no previous sibling selector in CSS
So, you can reorder the HTML so that <h1> is after the <button>, like this:
<div class="App">
<button class="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
<h1>Question Genie</h1>
</div>
and then you can use flex-direction: column-reverse; (or even order: -1 on the button) to make the <h1> appear above the <button>
CSS:
.App {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.btn:hover ~ h1 {
animation: sawtooth 0.35s infinite linear;
... rest of the stuff
}
Here's the codepen: https://codepen.io/palash/pen/ZvVNav
Be sure to check flexbox support here https://caniuse.com/#feat=flexbox
Just use javascript...
<button onmouseover="H1_ID.style.animation='sawtooth 0.35s infinite linear';" onmouseout="H1_ID.style.animation='none';"></button>
DROP MENU LINK
jsfiddle.net/a3MKG/83/
Refer to link above. Does anyone know how to get the navicon image to change upon click? I want it to become a different image (a picture of an X) once I click it.
Note: When you click the navicon, the drop menu comes down, and you can click anywhere OUTSIDE the drop menu to bring the drop menu back up, so you don't have to click the X image to remove the drop down and bring back the initial image. So I need the new navicon image only to be an X when the dropdown menu is actively displayed.
Any help will be much appreciated! Thank you all.
Ok so I saw your comment re. 'how do I close it just on closing the image' before i made my fiddle.
I changed your div dropTitle to an a and added another class to it menu-open
.menu-open{ background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
background-size:100% 100%;
}
and added a function that toggled it with 'close'
$('a').click(function(){
$(this).toggleClass('close')
});
.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
background-size:100% 100%;
}
I tweaked your dropTitle class slightly to
.dropTitle{
display:block;
width:50px;
height:50px;
cursor:pointer;
}
but the functionality remains the same
Do not use javascript where you can use css!
input, input:before, input:after {
display: block;
content:'';
appearance: none;
-webkit-appearance: none;
position: relative;
width:20px;
background:black;
height:4px;
border-radius:2px;
transition: all linear 0.1s;
}
input:after{
top:3px;
}
input:before{
top:-7px;
}
input:focus:after{
transform: rotate(45deg);
top:-4px;
}
input:focus{
background:transparent;
}
input:focus:before{
transform: rotate(-45deg);
top:0px;
}
input:not(:focus) + div{
display:none;
}
<input type="checkbox" />
<div>
<img class="dropPillow" src="https://image.freepik.com/free-icon/square-outlined-shape_318-75498.png">
</div>
I'm trying to create a slider of images (previous/next) so the images slide to the left when I click "previous" and to the right when I click "next" with 0.5s of slowness, so it takes some animation. And when I reach the last image and click "next", I want images to "run backwards" to the first one, the same when I'm in the first one and click "previous", so it "run forward" until the last one.
I want the same behaviour this JSFiddle shows. (but I don't need the timer to move images automatically and don't need the "triggers" buttons, just "previous" and "next").
The problem here is that my images don't have fixed size. I define a width in percentage and can't define a height because I have responsive design, the image resizes as I resize the browser window.
The jQuery to previous/next actions is pretty easy, but I just can't find a way to add this animation when I remove/add the "active" class to my images (so they become visible or not).
I have already tried putting all images side by side and showing only the first one (setting container width equals to image width), so when I click "next" I just "move" the container to the left so it begins to display the next image, but it doesn't work because once I can't define the height of the images, they will appear underneath each other, not side by side.
JSFiddle
HTML
<div class="images">
<img class="active" src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="previous">previous</div>
<div class="next">next</div>
CSS
img {
width: 100px;
display: none;
float: left;
}
img.active {
display: block;
}
jQuery
$('.next').on('click', function() {
var active = $('img.active');
var next = active.next('img');
if (next.length) {
active.removeClass('active');
next.addClass('active');
} else {
active.removeClass('active');
$('.images img:first').addClass('active');
}
});
Well the problem is the height for sliding.
First you need to have an element which is the "picture frame" which hold all the other images. That's important.
For better imagination a picture:
Now you have several technics to show and hide images. One could be to set the opacity. When using transition: opacity .15s ease-in-out; The one Picture is fading out and the next on is fading in.
For the slideshow effect is given to the position of the visible image to its width to the left and the image previously purely new to his wide to the right and then to 0. Thus, moves the current picture on the left the frame out and the new comes out right in.
And here is the difficulty if the height is not the same. If the current image 300px high and the new 400px, so the image frame here would adjust his height immediately once the new image start to be visible.
The content below would start to jump with each slide.
Is that so desired???
If yes, I can make you an example how it works.
You can actually do this in Pure CSS!
You use an ID and a label (with a for attribute=for the targeted id)
That's basically it. All you have left is to style it! (Forked from Joshua Hibbert's Pen)
body {
background: #f7f4e2;
}
/* Slides */
.slider input {
display: none;
}
/* Buttons */
.slider label {
display: none;
cursor: pointer;
position: absolute;
top: 6em;
left: 50%;
transform: translateX(-50%);
color: #fff;
background: #000;
padding: 1.36em .5em;
opacity: .6;
font-size: 19px;
font-family: fantasy;
font-weight: bold;
transition: .25s;
}
.slider label:hover {
opacity: 1;
}
.previous {
margin-left: -188px;
}
.next {
margin-left: 188px;
}
#slide1:checked ~ .buttons .slide1 {
display: block;
}
#slide2:checked ~ .buttons .slide2 {
display: block;
}
#slide3:checked ~ .buttons .slide3 {
display: block;
}
#slide4:checked ~ .buttons .slide4 {
display: block;
}
/* Images */
.slider {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
white-space: nowrap;
padding: 0;
float: left;
transition: .25s;
overflow: hidden;
box-shadow: 0 0 0 3.12px #e8e8e8,
0 0 0 12.64px #eaebe4,
0 0 0 27.12px #000,
0 24px 3.824em 5.12px #000;
}
.slide {
width: 500em;
transition: .25s;
}
.slider img {
float: left;
width: 400px;
height: 300px;
}
#slide1:checked ~ .slide {
margin: 0;
}
#slide2:checked ~ .slide {
margin: 0 0 0 -400px;
}
#slide3:checked ~ .slide {
margin: 0 0 0 -800px;
}
#slide4:checked ~ .slide {
margin: 0 0 0 -1200px;
}
<div class="slider">
<input type="radio" name="slide" id="slide1" checked="true" />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<div class="buttons">
<!-- Slide 1 -->
<label for="slide4" class="slide1 previous"><</label>
<label for="slide2" class="slide1 next">></label>
<!-- Slide 2 -->
<label for="slide1" class="slide2 previous"><</label>
<label for="slide3" class="slide2 next">></label>
<!-- Slide 3 -->
<label for="slide2" class="slide3 previous"><</label>
<label for="slide4" class="slide3 next">></label>
<!-- Slide 4 -->
<label for="slide3" class="slide4 previous"><</label>
<label for="slide1" class="slide4 next">></label>
</div>
<div class="slide">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg">
</div>
</div>
Although this method is the most compatible (except for old versions of IE) and depending on how you animate it this method can be more time consuming than a JS method, but can also be faster, it just depends on how you want the animations to go, or you could use a css library that does this for you.
Here are some css image sliders I recommend.
10 Amazing Pure CSS3 Image Sliders
http://bashooka.com/coding/pure-css3-image-sliders/
Pure CSS Image Slider Without Javascript #Codeconvey is a good solution for what you're looking for, but lots of CSS
http://codeconvey.com/pure-css-image-slider/
The downside to these along with what you're working on is that you can't touch to slide on a phone or tablet which is more common now a days with photo galleries.
I recommend checking out Fotorama it's amazing! :)
Perhaps not the ideal situation but at least it will give you an idea. you can use the animation function of jQuery and I also changed your code a bit. See demo here
Within your HTML I would say this:
<div id="images">
<div class="images-wrapper">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
</div>
</div>
<div class="previous">
previous
</div>
<div class="next">
next
</div>
and within your jQuery code you can animate the width:
$('.images-wrapper img:gt(0)').hide();
$('.next').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper');
});
$('.previous').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350);
$('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut();
$('.images-wrapper img:first-child').fadeIn();
});
With this implementation the whole process of changing and adding the active class to the image is removed and replaced by animation functions
Simplest solution (I think) is to force the items to be of the same size, by placing them in a div. You can even have the div show the image without the use of an img tag, by using the background-image CSS feature (see http://www.w3schools.com/css/css3_backgrounds.asp for more details).
The item CSS could look like:
.item {
background-size: contain;
background-position: center;
}
and in each item in the HTML:
<div class='item' style='background-image: url(img1.jpg)' />
<div class='item' style='background-image: url(img2.jpg)' />
<div class='item' style='background-image: url(img3.jpg)' />
I finally got there.
HERE is the fiddle with the solution I developed.
The main problem in the implementation of this image slider was that images, althought were all the same size, have dynamic width (defined in % on CSS) and dynamic height (not defined on CSS).
The solution was basically put an "fake" image (with opacity: 0) inside my container so the container get the actual size of images I will use in the slider; put a div to "hold" the real images with position: absolute and give it a width calculted by number of images * 100%; and for last, give each image in my slider a width of x%, based on number of images.
In the jQuery, I "move" the "images holder div" always by %, never by static values, once the width of everything can change if I resize the window.
If you start to slide the images to the left and right and then resize the window, you will see that it continues to work perfectly.
I have implemented using css3 animations. However this will require manipulating animation values in css every time a slide gets added or removed.
#keyframes slideAnim {
0% {
transform: translateX(0)
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%)
}
50% {
transform: translateX(-50%)
}
62.5% {
transform: translateX(-50%)
}
75% {
transform: translateX(00%);
}
89.5% {
transform: translateX(00%)
}
100% {
transform: translateX(00%)
}
}
Here the animation values are set such that there is a pause between slide transitions. I have added a parent frame to show only one slide at a time.
Please refer this fiddle.
I have a page that looks like this...
<body>
<div id="detailDiv1" style="height 100px; overflow:auto">
</div>
<div id="detailDiv2" style="height 100px; overflow:auto">
</div>
<div id="detailDiv3" style="height 100px; overflow:auto">
</div>
<div id="detailDiv4" style="height 100px; overflow:auto">
</div>
</body>
Each of the detailDivs are loaded dynamically with rows of content (often lots of rows, causing a vertical scroll bar to appear inside the detailDivs). Each row inside each detailDiv contains a small image, some text, and a couple of buttons that increment counts in the DB that are then dynamically updated (ajax) on the row itself.
Since each of these detailDivs is so small, I'm trying to implement a "view as full screen" option but am struggling to come up with an elegant plan...
I know that I'm going to use a bootstrap modal to present the full-screen version of each detailDiv, and I'm guessing I need to duplicate the html from each detailDiv - something like...
$('#myFullScreenModal').html($('#detailDiv1').html());
That will load the content correctly, but of course the elements will have the exact same names (and therefore the interaction with the DB will be interfered with unless I empty the original container first, and reload it when the modal is closed).
But those options sound pretty hacky to me, and so I'm wondering whether there's a more standard way of achieving this effect without having to duplicate large chunks of html.
Thanks for any thoughts.
You could use position: fixed on the div in question then expand it out. That way you don't have to copy anything at all, you're just displaying that exact element as "fullscreen".
$('.go-fullscreen').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('fullscreen')) {
$parent.removeClass('fullscreen');
} else {
$parent.addClass('fullscreen');
}
});
html, body {
width: 100%;
height: 100%;
}
div {
height: 100px;
overflow: auto;
}
.red { background-color: #F00; }
.green { background-color: #0F0; }
.blue { background-color: #00F; }
div.fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<button class="go-fullscreen">Fullscreen</button>
</div>
<div class="blue">
<p>10</p>
<p>20</p>
<p>30</p>
<p>40</p>
<p>50</p>
<p>60</p>
<p>70</p>
<p>80</p>
<button class="go-fullscreen">Fullscreen</button>
</div>
<div class="green">
<p>100</p>
<p>200</p>
<p>300</p>
<p>400</p>
<p>500</p>
<p>600</p>
<p>700</p>
<p>800</p>
<button class="go-fullscreen">Fullscreen</button>
</div>
You can do this which will make it enlarge to a size you can configure :)
There is a css part and a jquery part. You could do this for them all. Of course change the scale to the desired size. Maybe not a full page takeover though will do a similar job. Hope you find it useful.
CSS
.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Jquery
$(function(){
$('.detailDiv1')
.on('mouseover', function() {
$('.detailDiv1').addClass('transition')
})
.on('mouseout', function() {
$('.detailDiv1').removeClass('transition');
});
});