CSS class for fly in transition for javaScript - html

Question

I need your help using CSS3 transitions. I have some contend I want to fly in from the right to its defined position when hovering. This can be achieved using the CSS in the :hover rule.
However, I want to call this effect from a JavaScript function, so I need your help.
Here is the Code:
#blockcart-wrapper .cart-preview .header {
border: none;
}
#blockcart-wrapper .cart-preview .header .cart-icon {
width: 25px;
height: 28px;
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
display: none;
width: 400px;
background-color: #fff;
right: 0;
}
.cart-preview:hover .body {
display: block;
position: absolute;
}
.cart-preview.cart-overview {
width: 100%;
position: inherit;
}
.cart-preview.cart-overview .body {
display: block;
position: inherit;
width: 100%;
}
.cart-preview .header > :first-child {
float: left;
}
.cart-preview .header > :last-child {
float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
clear: both;
content: "\A0";
}
.cart-preview .body {
border: 1px solid #808080;
padding: 2px;
}
.cart-preview ul {
margin: 0;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.cart-preview li {
list-style: none;
margin-bottom: 15px;
}
.cart-preview li > * {
display: inline-block;
vertical-align: top;
}
.cart-preview li .product-quantity {
color: #666;
width: 10%;
}
.cart-preview .product-quantity::after {
content: 'x';
}
.cart-preview li .product-name {
width: 50%;
}
.cart-preview li .product-price {
width: 20%;
}
.cart-preview li .remove-from-cart {
text-indent: 100%;
display: inline-block;
overflow: hidden;
vertical-align: middle;
text-decoration: none;
color: inherit;
font-weight: bold;
width: 2em;
white-space: nowrap;
float: right;
}
.cart-preview li .remove-from-cart::before {
content: 'X';
text-indent: 0px;
border: 1px solid #ccc;
border-radius: 100%;
width: 1em;
height: 1em;
padding: 2px;
text-align: center;
background-color: #333;
color: #fff;
float: left;
}
.cart-preview .cart-totals .label {
float: left;
}
.cart-preview .cart-totals .value {
float: right;
}
.cart-preview .cart-totals > div {
clear: both;
border-bottom: 1px solid #ccc;
}
.cart-preview .cart-totals > div:not(:last-child) {
margin-bottom: 5px;
}
.cart-totals .label {
font-weight: bold;
}
#blockcart-modal {
position: fixed;
background-color: rgba(255,255,255,0.1);
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
#blockcart-modal > div {
padding: 20px;
display: inline-block;
min-width: 50%;
min-height: 400px;
margin-top: 200px;
text-align: left;
background-color: #fff;
z-index: 100;
border: 1px solid #ccc;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://fakeimg.pl/50x50/?text=cart+icon">
</a>
</div>
<div class="body">
<ul>
</ul>
<div class="cart-subtotals">
<div class="products">
<span class="label">Partial sum</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
<div class="shipping">
<span class="label">Shipping</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
</div>
<div class="cart-total">
<span class="label">Total sum</span>
<span class="value">0</span>
</div>
</div>
</div>
</div>
So I want to achieve, that the div with class body flies in from the right to its determined position using an own class so I can toggle the class by a JavaScript if a certain external event is triggered and the class should only contain the transition effect, so the browser does the 'reverse transition' when the hover is stopped or the class is removed by a JavaScript function.
Can you help me here?

Answer 1

The css should be just like you would do if using :hover, just instead of :hover add a class to the selector (a.hovered), and use js mouseover and mouseout events to toggle this class.
CSS -
div.body.hovered {
right: 300px; /*or however you meant to do the transition*/
}
JS -
var elements = document.getElementsByClass('body');
elements.addEventListener("mouseover", function( event ) {
this.classList.add('hovered');
});
elements.addEventListener("mouseout", function( event ) {
this.classList.remove('hovered');
});