I have an element with a transition property defined. I animate it between two states by toggling a class.
However, in Edge (40.15063.674.0, EdgeHTML 15.15063), a transition is not animated (the state changes immediately instead) if a previous transition has not finished.
Here's a minimal snippet. Note that the square should never jump discontinuously.
const div = document.getElementById("div");
setInterval(() => {
div.classList.add("translate");
setTimeout(() => {
div.classList.remove("translate");
}, 500);
}, 2000);
#div {
transition: 1000ms;
width: 300px;
height: 300px;
background-color: red;
}
.translate {
transform: translate(200px, 0);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="div">Test</div>
</body>
</html>
How can I work around this bug?
I tried setting transition-property as suggested here, but it didn't help.
Below code is working fine in edge. I have added translate(0, 0) in #div to back in default position after removing translate class. Also combine #div with .translate class to overwrite css.
const div = document.getElementById("div");
setInterval(() => {
div.classList.add("translate");
setTimeout(() => {
div.classList.remove("translate");
}, 1000);
}, 2000);
#div {
transition: 1000ms;
width: 300px;
height: 300px;
background-color: red;
transform: translate(0, 0);
}
#div.translate {
transform: translate(200px, 0);
}
<div id="div">Test</div>
Related
I want transform child element rotate if parent element have class open. Example in css
ul li.open > a > .sidebar-collapse-icon {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
How can I do it in tailwind?
Couldn't find the exact solution on Tailwind documentation. So tried this hack (instead of open, use group class):
<ul>
<li class="group">
<a>
<span class="sidebar-collapse-icon group-only:-rotate-180"></span>
</a>
</li>
</ul>
You should control css through JavaScript. Tailwind CSS is not relevant by question. I work with her and love this lib.
For example if you use:
Vanilla (pure) JavaScript:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const el = document.querySelector('.container')
if (el) {
el.style.backgroundColor = 'red'
}
</script>
</body>
</html>
React (Hooks):
import React, { useState } from 'react'
export default function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
if (!isOpen) {
return null
}
return (<div className="some-tailwind-class"></div>)
}
Vue if-show directive:
<template>
<div if-show="!isOpen" class="some-tailwind-class"></div>
</template>
<script>
export default {
data() {
return {
isOpen: false;
}
}
}
</script>
Vue v-if directive:
<template>
<div if-show="!isOpen" class="some-tailwind-class"></div>
</template>
<script>
export default {
data() {
return {
isOpen: false;
}
}
}
</script>
I have a header, whose className changes depending on State. Each class has a different background image, specified in the CSS. Everything works fine, but the transitions are quite abrupt without a fade-in effect.
I wrote:
.jumbotron-img-1{
background-image: url("/images/myImg1.jpg");
transition: all 1s ease-in-out;
It works, but it's ugly. There is a zoom, and a distortion of the image before it shows up in its final form. I've watched some tutorials on Google, but nothing was simple and to the point for background-image transition in pure CSS or React.
Any help would be greatly appreciated, thanks!
background-image is not an animatable property. I feel what best serves your purpose is to render multiple headers with all the classnames available stacked over each other with position: absolute; relative to common parent and make only one of them visible using opacity property based on which classname is active in your state and use transition on opacity
Sample working code:
render() {
const {imgClassList} = this.props;
const {activeimgClass} = this.state;
return (
<div className="header-container">
{imgClassList.map(imgClass => {
return (
<div
className={`header ${imgClass} ${(imgClass === activeimgClass)? 'active' : ''}`}
/>)
})}
</div>
)
}
And css be something like:
.header-container {
position: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
opacity: 0
transition: opacity 1s ease-in-out;
}
.header.active {
opacity: 1
}
.img-1 {
background:url('images/img-1')
}
.img-2 {
background: url('images/img-2')
} ... and so on
There's no good way to transition a background image using CSS because it's not an animatable property, per the CSS spec. One way to do this is to just have multiple images on top of one another, each containing a different one of the images you'd like to display, and then cycle through them by transitioning them to opacity: 0 and changing their z-index order.
I made a quick demo showing how you can achieve smooth changes by manipulating opacity and z-index. In pure Javascript, this is done by simply adjusting the styles with DOM manipulation and using setTimeout().
Of course in React you don't want to be doing DOM manipulation, so you can experiment with multiple classes with different opacity levels and transitions to accomplish this. There also seems to be a React component that enables all types of transitions: https://reactcommunity.org/react-transition-group/css-transition
Check out the Javascript solution demo to see how changing the opacity can get a crossfade effect on images:
function backgroundScheduler_1() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 0;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 1;
order(["-3", "-1", "-2"], () => { backgroundScheduler_2() }, 1000);
}, 3000);
}
function backgroundScheduler_2() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 0;
document.querySelector(".img3").style.opacity = 1;
order(["-2", "-3", "-1"], () => { backgroundScheduler_3() }, 1000);
}, 3000);
}
function backgroundScheduler_3() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 0;
order(["-1", "-2", "-3"], () => { backgroundScheduler_1() }, 1000);
}, 3000);
}
function order(array, callback, time) {
setTimeout(() => {
document.querySelector(".img1").style.zIndex = array[0];
document.querySelector(".img2").style.zIndex = array[1];
document.querySelector(".img3").style.zIndex = array[2];
callback();
}, time);
}
backgroundScheduler_1();
.background-image {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: 1s;
}
.img1 {
z-index: -1;
}
.img2 {
z-index: -2;
}
.img3 {
z-index: -3;
}
<div class="background-container">
<img class="background-image img1" src="https://placeimg.com/640/640/nature"></img>
<img class="background-image img2" src="https://placeimg.com/640/640/animals"></img>
<img class="background-image img3" src="https://placeimg.com/640/640/tech"></img>
<h2 style="color: white;">WOW!</h2>
</div>
I checked NPM momentarily and didn't see anything that promises this exact functionality. Hope this helps!
I'm using iron-icon components for my Polymer 2 application, and I want to know how to flip these icons vertically or horizontally? I've tried the transform attribute and equivalent for other browsers, but it didn't work for me. as below:
.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 30px;
height: 50px;
transform: scale(-1);
}
I've even tried ´filter´ attributte on IE:
.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 30px;
height: 50px;
filter: FLipH;
}
And my icon instantiation looks like:
<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>
The imports statement goes like this:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
You can find a snippest here below:
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (webComponentsSupported) {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
} else {
// Load webcomponents.js polyfill
var script = document.createElement('script');
script.async = true;
script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(script);
}
h1 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin: 24px 0;
}
.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 50px;
height: 70px;
}
<!-- <base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"> -->
<!-- <base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"> -->
<base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<style is="custom-style">
body {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
</style>
<h1>Polymer Icon to Flip</h1>
<p>And I want to flip it vertically and/or horizontally, need only the css. Thanks</p>
<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>
icon to flip
<script>
window.addEventListener('WebComponentsReady', function() {
// Async call needed here for IE11 compatibility.
Polymer.Base.async(function() {
});
});
</script>
If need more info plz ask in comments.
I found a solution by using:
.my-class {
transform: rotate(180deg);
}
Hi please have a look in updated snippet.
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (webComponentsSupported) {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
} else {
// Load webcomponents.js polyfill
var script = document.createElement('script');
script.async = true;
script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(script);
}
h1 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin: 24px 0;
}
.my-icon-class {
color: #55555A;
margin-top: 10px;
width: 50px;
height: 70px;
transform: rotateX(180deg);
}
.my-icon-class:hover {
transform: rotateY(180deg);
}
<!-- <base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"> -->
<!-- <base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"> -->
<base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<style is="custom-style">
body {
#apply(--layout-vertical);
#apply(--layout-center-center);
}
</style>
<h1>Polymer Icon to Flip</h1>
<p>And I want to flip it vertically and/or horizontally, need only the css. Thanks</p>
<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>
icon to flip
<script>
window.addEventListener('WebComponentsReady', function() {
// Async call needed here for IE11 compatibility.
Polymer.Base.async(function() {
});
});
</script>
<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript">
yam.connect.embedFeed({
"config": {
"use_sso": false,
"header": false,
"footer": false,
"showOpenGraphPreview": false,
"defaultToCanonical": false,
"hideNetworkName": false,
"defaultGroupId": 8430003
},
"container": "#embedded-feed"
});
</script>
How would I insert CSS into it in order to change the background color of the embedded yammer?
<style>
#embedded-feed { background-color: orange; }
</style>
If I use the above CSS turns it orange, and the immediately reverses.
The embedded content is inside an iframe that got a white background. I'm afraid you cannot change it.
You can sort of manipulate it in a hacky way, by using a pseudo element (::after) on top of the container (#embedded-feed), which has a background and a blend mode:
#embedded-feed {
position: relative;
}
#embedded-feed::after {
content:'';
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
background: orange;
pointer-events: none;
mix-blend-mode: multiply;
}
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed',
network: 'fourleaf.com',
feedType: 'group', // can be 'group', 'topic', or 'user'
feedId: '123', // feed ID from the instructions above
config: {
defaultGroupId: 3257958 // specify default group id to post to
}
});
</script>
jsFiddle: https://jsfiddle.net/azizn/40faxryw/
Be careful, this is experimental and has limited browser support as of now (FF32, Chrome 41+, Safari 8+, Opera, No IE).
You can play around with different options, colors and/or opacity:
Cannot think of another solution that does not involve CORS.
MDN - CSS mix-blend-mode
Can I use... mix-blend-mode
I'm trying to put a highchart in a flexbox container. The chart grows with the container just fine, but it doesn't shrink when the container shrinks.
My project uses angularJS and highcharts-ng, although I'm guessing the problem lies with flexbox itself. It's the same in Chrome and IE at least.
Here's a plunkr that illustrates the issue. If you open the embedded view you'll notice when you make the window wider, both charts reflow to fit. But when you make it narrower, the top chart (in a flexbox), remains unchanged.
I put in the reflow button to broadcast the reflow event for highcharts-ng, but it seems to have no effect.
I'm looking for a workaround or any solution that will still let me use flexbox.
Below is the code from Plunkr. It is based on another plunk by the author of highcharts-ng that solved a similar issue for bootstrap containers.
index.html
<!DOCTYPE html>
<html ng-app="highChartTest">
<head>
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MyHighChart as c">
<div class="page-container">
<div class="side-panel">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
</ul>
</div>
<div class="main-panel">
<highchart id="highchart01" config="c.config" height="300"></highchart>
</div>
</div>
<highchart id="highchart02" config="c.config" height="300"></highchart>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js#*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script data-require="highcharts#4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="highcharts-ng#0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>
<script src="app.js"></script>
</body>
</html>
style.css
.page-container {
margin: 20px;
border: 1px solid black;
display: flex;
}
.side-panel {
width: 200px;
flex-shrink: 0;
background-color: #ddd;
}
.main-panel {
margin: 10px;
padding: 20px;
flex-grow: 1;
border: 1px solid blue;
}
.highcharts-container {
width: 100%;
border: 1px solid red;
}
app.js
(function() {
angular.module('highChartTest', ['ui.bootstrap', 'highcharts-ng'])
.controller('MyHighChart', ['$scope', '$timeout', MyHighChart]);
function MyHighChart($scope, $timeout) {
$scope.onReflowButtonPressed = function(){
console.log("broadcasting reflow");
$scope.$broadcast('highchartsng.reflow');
}
var chartId = 'yieldColumns01';
this.widget = {
chartId: chartId,
cols: '12',
title: 'Reflow Test'
};
this.config = {
options: {
chart: { type: 'column' },
legend: { enabled: false},
},
title: { enabled: false, text: ''},
xAxis: { categories: ['A', 'B', 'C', 'D', 'E', ] },
yAxis: { max: 100},
series: [{
name: '2014',
data: [90.9, 66.1, 55.0, 53.2, 51.2]
}],
size: { height: '300' },
// function to trigger reflow in bootstrap containers
// see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
func: function(chart) {
$timeout(function() {
chart.reflow();
// //The below is an event that will trigger all instances of charts to reflow
//$scope.$broadcast('highchartsng.reflow');
}, 0);
}
};
}
})();
You can either set a non-relative width or flex-basis on the .main-panel container to help Highcharts figure out the parent element's dimensions.
I've also removed the width: 100% on .highcharts-container since it wasn't doing anything.
The original Plunkr works on Safari 9.0.1, so this could be due to differences in how browsers implement the flexbox spec (e.g. related issue with width/height: 100%)