$(this).removeClass('hidden');
setTimeout(() => $(this).css('transform','translateY(0)'), 0);<template shadowroot="open">customElements.define('tag-name', class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }).appendChild(rootElement);
}
}
);<tag-name>
<link rel="stylesheet" href="путь/к/стилям/этого/элемента.css">
<div class="container">Тут контент</div>
</tag-name>:host .container {
color: red;
}<input class="input" name="sum_exchange" id="sum_exchange" type="text" value="1000."><span class="two-00">00</span>input.input {
outline: none;
border: none;
padding-left: 97px;
width: 48px;
font-size: 20px;
}
.two-00 {
margin-left: -1px;
font-size: 20px;
color: gray;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>.container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
background-color: #ff0000;
}
.item {
width: 100px;
height: 100px;
background-color: #00ff00;
display: flex;
justify-content: center;
align-items: center;
}<abbr title="Содружество Независимых Государств">СНГ</abbr>abbr[title] {
text-decoration: none; // обнуляем стандартный стиль
border-bottom: 1px solid red;
}<div class="container">
<div class="no">no</div>
<div>yes</div>
</div>.container div:not(.no) {
opacity: .5;
}
.no {
opacity: 1;
}<footer>
<div class="content">
Тут контент и прочая ересь
</div>
</footer>footer {
height: 150px;
background-image: url(https://img.gazeta.ru/files3/649/13056649/smesha-pic4_zoom-1500x1500-92995.jpg);
background-position: center;
}
.content {
display: flex;
justify-content: center;
align-items: center;
color: #ff0000;
height: 100%;
}