I'm trying to make the ::backdrop pseudo-element of my dialog component using CSS. I've been able to achieve it on Edge and Chrome, but it seems like Firefox is not correctly applying the transition.
Does anyone know if that's not supported in FF, or my code is just wrong ? The modal itself respects the opacity transition, it's just the ::backdrop pseudo-element that comes up instantly.
This is the code I used for a quick proof of concept:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog PoC</title>
<style>
dialog {
opacity: 0;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
}
dialog.active {
opacity: 1;
}
dialog::backdrop {
background: black;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
opacity: 0;
}
dialog.active::backdrop {
opacity: 0.8;
}
</style>
</head>
<body>
<dialog>
<p>test nice</p>
<button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
open dialog
</button>
<script>
const dialog = document.querySelector('dialog')
const openBtn = document.querySelector('#openBtn')
const closeBtn = document.querySelector('#closeBtn')
openBtn.addEventListener('click', open)
closeBtn.addEventListener('click', close)
function open() {
dialog.showModal()
dialog.classList.add('active')
}
function close() {
dialog.close()
dialog.classList.remove('active')
}
</script>
</body>
</html>
Related
I am programming an AMP website www-dev.example.com that points users to a sign-up page.
The sign up page is hosted on an identity server using the subdomain auth.www-dev.example.com.
I now want to deploy my AMP website to a staging environment www-stg.example.com and at the same time point users to it's respective staging identity server auth.www-stg.example.com.
Ideally I would have a config per environment in a relative appsettings.json file and use amp-mustache to map the environment variables into the the urls of <button> or a tags.
I'm currently achieving the desired functionality, somewhat, with amp-list, but it looks like a dogs breakfast causing some undesired and painstaking effects on the font end with alignment and scaling due to the fixed dimensions.
Is there a simple way to set environment variables in AMP for use in links?
HTML Implementation
<amp-list width="130" height="45" layout="flex-item" src="/appsettings.json">
<template type="amp-mustache">
<button type="button" on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</amp-list>
appsettings.json Implementation
{
"items":[{
"login-url":"https://auth.www-dev.example.com/login",
"logout-url":"https://auth.www-dev.example.com/logout",
"signup-url":"https://auth.www-dev.example.com/signup",
"unsubscribe-url":"https://auth.www-dev.example.com/unsubscribe"
}]
}
Any help or suggestions would be much appreciated!
Edit - Example showing the start of the front end issues I'm looking to avoid
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bug</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<link rel="canonical" href="https://example.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style amp-custom>
/* Delete this to reveal amp-list*/
.flex {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;}
.left {
border: solid 1px blue;
}
.right {
border:solid 1px green;
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<template id="foo" type="amp-mustache">
<button class="button-secondary" type="button"
on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</head>
<body>
<div class="flex">
<div class="left">
<p>Flex Left</p>
<button on="tap:foobar.changeToLayoutContainer()">Change Layout</button>
</div>
<div class="right">
<amp-list id="foobar" width="auto" height="1" src="/appsettings.json" template="foo">
<div placeholder>Loading</div>
<div fallback>Failed to load data.</div>
</amp-list>
</div>
</div>
</body>
</html>
I ended up using Terraform and parsing the html file through as a template during deployment, prior to uploading the html to its hosting destination.
HCL
module "template_files" {
source = "hashicorp/dir/template"
base_dir = "./src/static_website"
template_file_suffix = ".html"
template_vars = {
canonical = var.canonical
signup-url = var.signup-url
}
}
HTML
<button type="button" on="tap:AMP.navigateTo(url='${signup-url}', target='_top')">Sign Up</button>
Im having issue here. This works on Chrome but I cannot get any animations to work inside index.html for IE11. I get a static screen when it doesn't feel like working. Also in IE the message doesn't go away as it should. If I place the div inside Nothing shows at all in IE.
Does anyone have a good method of implementing a working animated screen inside index.html while bootstrap is loading? My css works some of the time in IE 11
My example that I have tried to use
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>My App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="bacicon.ico">
<script type="text/javascript"></script>
<style>
.loading {
opacity: 0;
transition: opacity 0 ease-in-out 1s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, app-root is empty */
app-root:empty + .loading {
opacity: 1;
z-index: 100;
}
app-root:empty + .loading h1 {
position: absolute;
color: #eee;
top: 50%;
width:100%;
text-align: center;
transform: translate(0, -50%)
}
}
</style>
</head>
<body style="margin-top: 0px" >
<app-root>
</app-root>
<div class="loading">
<h1>Application is Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
</div>
</html>
my css
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}
You need to use this open your polyfill.ts file and find this part of code :
/**
* Required to support Web Animations `#angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera.http://caniuse.com/#feat=web-animation **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
then remove comment before import 'web-animations-js';
and run this command npm install --save web-animations-js
I'm trying to make the smoothState.js plugin work. After clicking on a link that leads from index.html to secondary.html the animation produces a reverse but does not lead to secondary.html, remaining in fact on the same screen.
Here you will find the small example uploaded on codepen:
https://codepen.io/vizzale/project/editor/DPkyBr
here instead the code:
(index.html)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:100vh;background-color:red;z-index:100;"></div>
link page
</section>
<section style="width:100vw;height:20vh;background-color:grey;"></section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(secondary.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:30vh;background-color:red;z-index:100;"></div>
link page
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(JavaScript)
$(function() {
'use strict';
var $page = $('#cover'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
onStart: {
duration: 700, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
(CSS)
* {
margin: 0;
padding: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
color: #000;
background: #fff;
will-change: auto;
overflow-x: hidden;
}
a, a:link, a:hover, a:active, a:visited {
color: #000;
text-decoration: none;
}
#cover {
height: 100vh;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.scene .scene_element {
-webkit-animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.scene .-fadeindown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
Try with class="m-scene" on your container, I don't think this class can be changed.
I answer my own question to inform you guys that the problem does not seem to exist. It is sufficient to emulate the site on a live server (for example Atom Live Server) in order to correctly switch from one page to another.
I'm practicing html and having problem.
First, my code:
i:hover{
transform: rotate(360deg);
transition: 1s all;
}
i{
transition: 1s all;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car">This is a car.</i>
</body>
</html>
I want to make my icon spin when hovering at icon and text, but when I hover with this code, entire text spins. What should I do to make my car spin without spinning the whole line? Do I have to use javascript in this?
Rotate the pseudo-element that create the icon:
i:hover::before {
transform: rotate(360deg);
}
i:before {
display: inline-block;/* mandatory to be able to use transform */
transition: 1s all;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-car">This is a car.</i>
I have this simple loading indicator:
https://jsbin.com/putuloledu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>
Which is supposed to show a self-growing rectangle indicator which grows evenly then stops at 200px width.
As can be seen, no easing is added anyhow.
Why then the animation slows down in the end and how to disable it making it even from start to end?
If i have understood you correctly this is what you may need just use the animation-timing-function:linear
here i have done it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
animation-timing-function: linear;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>
Lookup the animation-timing-function animation property.