In my application, I use a <paper-fab> as a back-button, and hide it if there is no url-property set:
<paper-fab icon="arrow-back" on-tap="goToUrl" hidden$="[[!url]]"></paper-fab>
Hiding/showing is done by the truly amazing hidden$="[[!url]]" magic.
I would like to animate the hiding/showing by sliding in/out.
How could that be done the Polymer-way?
You could use CSS transitions based on an attribute, which is set dynamically by a property. In the following example, the button toggles a property (_fabVisible), which is bound to the <paper-fab>.visible attribute:
<paper-fab visible$="[[_fabVisible]]" label="+"></paper-fab>
<button on-click="_toggleFab">Toggle</button>
// script
_toggleFab: function() {
this._fabVisible = !this._fabVisible;
}
The magic happens in the template's style, using CSS transitions. The CSS simultaneously fades in and slides in the <paper-fab> from the left.
<style>
paper-fab {
opacity: 0;
left: -100px;
transition: opacity 0.6s ease-in-out, left 0.3s ease-in-out;
}
paper-fab[visible] {
opacity: 1;
left: 0;
}
</style>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_toggleFab: function() {
this._fabVisible = !this._fabVisible;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-fab/paper-fab.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-fab {
opacity: 0;
left: -100px;
transition: opacity 0.6s ease-in-out, left 0.3s ease-in-out;
}
paper-fab[visible] {
opacity: 1;
left: 0;
}
</style>
<button on-click="_toggleFab">Toggle FAB</button>
<paper-fab label="+" visible$="[[_fabVisible]]"></paper-fab>
</template>
</dom-module>
</body>
codepen
Related
I'm trying to figure out how transforming, animating, and transitioning work, and I've followed atleast 1 or 2 crash courses and I have followed 5 solutions in problems related to this, and still nothing worked.
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 2s ease-in-out;
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: width 1s ease-in-out, transform 2s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180);
width: 30vh;
}
JSFiddle: https://jsfiddle.net/q976oc0h/1/
CodeSandbox: https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
CodePen: https://codepen.io/ssssss12518/pen/rNMMZoL
It doesn't work on any code editor I know, even IDEs like Atom. (my main text editor)
There's a couple of things going on.
The transform functions als take a unit:
transform: rotateZ(180); -> transform:rotateZ(180deg);
The transition from height:auto; isn't intuitively supported.
There's a couple of work arounds. You could find exmaples on this question
Sidenote: Generally, transitioning on width/height is bad practice for performance. It will trigger a reflow/recalculate of the document structure. which is costly.
You would also notice that the text inside the divs gets squished into multiple lines or moves around a lot.
general approach is to use transform to shrink/grow/fold-out the elements. like you did for rotate.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
}
.container {
padding: 10px;
margin-left: 20px;
}
.container > *[class*="bg"] {
margin-left: 10px;
}
.bg-gray {
margin: 10px 0px;
background-color: #cbd5e0;
border: 3px solid black;
padding: 20px;
margin-bottom: 20px;
width: 30%;
}
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 1s ease-in-out;
height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: transform 1s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Transition Animation CC</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="bg-gray" id="tr-w">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" id="tr-h">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" style="height: 30vh;" id="tr-r">
<p>
Hover over me
</p>
</div>
</div>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
because you didn't set default height to #tr-h element
#tr-h {
transition: height 2s ease-in-out;
height:100px;
}
I need an element to appear where another was, let's say on hover for the sake of an example. And I need to use CSS animations to make its transition smoother. So I can't use display property. And instead, I have to use this, right?
div {
visibility: hidden;
opacity: 0;
}
But my elements need to overlap, as in where one was, the other has to show instead. With display, that was pretty easy, but with this, I have no clue how to do this without making it too messy.
Can someone help me out? Here's the basic outline of my code:
.first-outline .first:hover {
visibility: hidden;
opacity: 0;
}
.first-outline .second {
visibility: hidden;
opacity: 0;
}
.first-outline:hover second {
visibility: initial;
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>
<!-- Or something like this, but it still doesn't work -->
<li class="list-group-item second-outline">
<span class="first">First</span>
<span class="second">Second</span>
</li>
Thank you.
Give the container a positon: relative and the inner divs positin: absolute then play with the hover states and opacity.
add transition property for smooth effect
.first-outline {
position:relative;
}
.first-outline .first, .first-outline .second {
position: absolute;
top: 0 ;
left: 0;
width: 100%;
height: 100%;
transition: opacity 500ms linear;
-webkit-transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
}
.first-outline:hover .first, .first-outline .second {
opacity: 0;
}
.first-outline:hover .second {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item first-outline">
<p class="first">First</p>
<p class="second">Second</p>
</li>
I have a page that creates a pop-up notification whenever a message is broadcasted from another user. The pop-up is basically a div that holds content from the sent message with a button that allows you to close it.
Now I've researched a million ways to create transitions that extend properties using pseudo classes but my question is this: Is it possible to create a banner at the top of the page that slides down with the message when it's sent by another using pure CSS3 / transition mixins?
My thought was to transition the max-height property but obviously it isn't working. I'm assuming because there is no height to begin with.
CSS:
.banner-messages {
> div {
background-color: #74bce7;
color: #fff;
top: 0;
left: 0;
padding: 20px 30px;
position: relative;
line-height: 100%;
width: 100%;
max-height: 0;
z-index: 1000;
overflow-y: hidden;
#include drop-down;
}
}
#mixin drop-down {
max-height: 200px;
-webkit-transition: all 1.5s linear;
-moz-transition: all 1.5s linear;
-o-transition: all 1.5s linear;
transition: all 1.5s linear;
}
HTML:
<div id="test" class="banner-messages" data-bind="foreach: messages">
<div class="banner-message">
<img data-bind="imgSrc: 'radio.svg'">
<div class="banner-body">
<p class="banner-title">{{title}}</p>
<pre>{{message}}</pre>
</div>
<span class="exit-dialout-panel icon icon-closes" data-bind="visible: dismissable, click: $parent.dismissMessage.bind($parent, $data)"></span>
</div>
Try adding a class with the css binding that applies transform: translateY:
var Viewmodel = function Viewmodel() {
var that = this;
this.messages = ko.observableArray([]);
this.removeMessages = function removeMessages() {
that.messages.removeAll();
};
this.addMessage = function addMessage() {
that.messages.push("A new message came in");
};
};
ko.applyBindings( new Viewmodel() );
header {
transition: transform 0.3s;
transform: translateY(-110%);
background-color: lightblue;
padding: 2rem;
font-family: sans-serif;
}
header.active {
transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<header data-bind="css: { active: messages().length > 0 }">
<ul data-bind="foreach: messages">
<li data-bind="text: $data"></li>
</ul>
<button data-bind="click: removeMessages">mark all as read</button>
</header>
</main>
<button data-bind="click: addMessage">Add message</button>
I need to do just a simple transition of background img, but searching for tutorials I found out a way to do it.
But its not working? Don't know why?
#chat
{
background-image:url(chat.png);
width:91px;
height:40px;
float:right;
transition: background-image 1s ease-in-out;
}
#chat:hover
{
background-image:url(hchat.png);
width:91px;
height:40px;
}
Link of code:
http://jsfiddle.net/xscsz5c0/2/
Is there something, I am missing? Coz I am not that good in CSS!
Because background transition doesn't work in Firefox, here's a workaround (which also gets around the problem of the hover image not loading with the page): http://codepen.io/pageaffairs/pen/azHli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#chat
{
background:url(http://i62.tinypic.com/29or6z6.png);
width:91px;
height:40px;
position: relative;
display: inline-block;
}
#chat::after
{
content: "";
display: inline-block;
background: url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
opacity: 0;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
#chat:hover::after
{
opacity: 1;
}
</style>
</head>
<body>
<a id="chat" href="chat.php"></a>
</body>
</html>
My favorite way to deal with this is with a jQuery plugin called anystretch. You will need to download the anystretch js file and add it to your project. You will also need to have jquery.
I love anystretch because it replaces the target div with a specified image but also lets you chose a fadeIn time for it.
I had issues with using the css transition because it's cross-browser functionality was horrible.
sample on codepen http://codepen.io/cwilliams23/pen/iIomJ
$(document).ready(function() {
$("#chat").mouseenter(function() {
$("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});
$("#chat").mouseleave(function() {
$(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
});
});
});
You can play with the fade times to make it fade the way you want. The speed settings are in ms so 5s would be 5000.
Add display:inline-block to your code:
#chat:hover
{
background-image:url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
display:inline-block;
}
Demo
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)