Is it possible and how to persist DOM elements transformation applied via CSS transition. The case is simple animate a DOM element with CSS and on animation complete I want to persist the DOM element in the complete animation state and remove the CSS style with which I have applied the transformations.
Related
When I add children to the web component from outside, adding as reveal will it be a problem for it to benefit from the shadow dom?
When the Custom Element has shadowDOM,
Slotted lightDOM content is reflected to <slot> elements in shadowDOM
The reveal button in F12 tools takes you to the current slotted lightDOM content
Also see: ::slotted CSS selector for nested children in shadowDOM slot
I want to style ng-container like add borders when on hover or show a button inside this tags on hover but this isn't possible. ng-container doesn't seem to be responsive to styling. Is rendered on DOM and if not what can I use to access it?
According to Angular official docs <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. It's only meant to be used as a container for structural directives when you need some HTML elements immediate children to be of a specific type. For styling you would have to go with regular elements instead.
I have a scenario where I need to animate a div that has a children acting as background helpers. The children need to stay behind the div's background at all time. Without animation adding
z-index: -1 keeps them behind the tranparent background. However they do not stay behind the background when animating.
I have prepared a jsFiddle to show this:
-->https://jsfiddle.net/Jonathan002/gmv70wz7/6/
I know I can fix this by adding an extra div tag to be the background instead. I want to avoid this and direct the question on why the animation will alter my z-index values. Is there another property change happening when the div is animating?
How can I get the div to animate-in naturally (with no changes to dom) while retaining the z-index values?
Elements with transform and opacity don't obey regular z-index order.
That's because browsers create a separate layer to accelerate animations with transform, and per spec the opacity property requires special handling for compositing.
I've got an element, when it's parent's class changes, gets different display and width properties.
I would like to transition just the width property, but the transition doesn't get applied if the display property changes - even though the display property isn't being transitioned.
JSFiddle here: http://jsfiddle.net/B6k3j/.
You can see .none-content doesn't get any properties transitioned (I've also transitioned background-color for visual effect) because it is changing from display:none to display:inline-block. The .ib-content element however, whose display property doesn't change, transitions fine.
To be clear: I'm not trying to transition the display property, the display property just happens to be changing at the same time I want the transition to apply.
Sidenote: I have an example using animations, but it has odd behaviour & I'd like to support IE9 if possible: http://jsfiddle.net/VeAy2/1/
<pseudo> </pseudo> ?
The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow.
What is the element type of a pseudo element?
And can we programmatically create them, without using CSS?
Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different pseudo-elements for different purposes or different parts of element structures, such as the self-explanatory ::first-letter and ::first-line, and ::before and ::after for generating content before and after an element's actual content.
That pseudo-elements affect the page flow has nothing to do with the DOM. A browser uses CSS to lay out and format DOM elements into objects that can be rendered to the screen, and in the process of doing so creates pseudo-elements as descendants of boxes that are made for real elements. Although you typically attach a pseudo-element to an element, you're not altering the DOM in any way; instead, you're simply altering how the browser lays out a page.
Because pseudo-elements are a concept unique to CSS (defined in the Selectors module), you cannot create them using anything other than CSS. The implementation of pseudo-elements as a CSS concept is defined in CSSOM instead, which is the CSS equivalent of the DOM (and where methods like window.getComputedStyle() are defined). However I'm not very familiar with the CSSOM, so I can't comment further than that they're implemented very similarly to real elements in terms of CSS.