Having a div with dynamic content of scrollable logs, how can I make a transition when it shows/hide
I need its height gradually increase/decrease.
<div className={logsClass}>
<div className={isOpened ? 'show' : 'hide'}>
<p dangerouslySetInnerHTML={{__html: formatNote(props.logs)}}/>
<div ref={dummy} className='a' />
</div>
</div>
Here is my CSS:
.show{
opacity: 1;
visibility: visible;
}
.hide{
visibility : hidden;
opacity: 0
}
.rc_logsContent {
overflow-y: auto;
background-color: #2b2b2b;
color: white;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
transition: height 500ms;
}
Related
I am making a carousel with react-slick and trying to add hover transition to it. But the picture can only scale in 1 direction.
My css:
.carousel {
margin-bottom: 10rem;
margin-left: 3.75rem;
margin-right: 3.75rem;
.slider-container {
div {
img {
width: 100%;
padding-right: 2px;
padding-left: 2px;
transition: transform .3s;
border-radius: 5px;
&:hover {
transform: scale(1.3);
transition: transform .6s;
border-radius: 5px;
}
}
}
}
}
react.js:
<div className="carousel">
<h2> Trending </h2>
<Slider {...settings} className="slider-container">
<div>
<img src={img1} alt=""/>
</div>
You need to set
.slick-list {
overflow: visible;
}
This will overwrite current slick overflow value and allow children to overflow
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
i have a *ngFor that fill my page with items.
within the ngFor i have banners that i want to display.
but the banners width is different from the other items.
so the banner is clickable only within the width of the original li width.
a half of the banner is just displayed but i can not click on it.
i think the problem is because the other items height is get bigger if banner is showed.
the li original sizes is 200X250 px
and when a banner is showed up the li sizes changed to 200X400.
(the banner height is added to the other items height)
blue = banner
red = clickable
green = unclickable
<ul class="row">
<li
*ngFor="let fav of favoriteLessons2; let i = index"
class="col-12 col-sm-6 col-md-4 col-xl-4">
<div class="item pointer">
<jt-lesson-item
[lesson]="fav"
[userLessonId]="fav.id"
[lessonType]="true">
</jt-lesson-item>
<p-progressBar
class="customProgress"
[value]="func(favoriteLessons[i]) | number:'1.0-0'">
</p-progressBar>
</div>
<div
class="banner pointer"
*ngIf="i > 0 && i%counter==0">
<jt-ngui-in-view
[once]="true"
(inView)="updateBannerWatched(bannersArray[bannerIndex(i)])">
<ng-template>
<img
(click)="updateBannerClicked(bannersArray[bannerIndex(i)])"
[src]="bannersArray[bannerIndex(i)].imageUrl"
(click)="bennerPressed(bannersArray[bannerIndex(i)].id)">
</ng-template>
</jt-ngui-in-view>
</div>
</li>
</ul>
how can i handle this issue ?
thank you !
Edited:
css code :
ul{
text-align: center;
direction: rtl;
height:100%;
padding-top: 40px;
padding-right: 90px;
}
li{
width:100%;
max-width: 200px;
list-style: none;
direction: rtl;
text-align: right;
// display: inline-block;
margin:10px;
padding:10px;
&.banner {
width:100%;
display: block;
padding: 10px;
margin-top:10px;
}
}
img{
display: block;
margin: 10px;
padding-top: 23px;
}
.item{
background-color: #FFF;
border-radius: 4px;
width:200px;
&:hover{
background: rgba(23, 23, 23, 0.8);
border-radius: 4px;
bottom: -4px;
color: #000;
left: -4px;
right: -4px;
top: -4px;
display: block;
opacity: 20;
z-index: 1;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0s;
padding:1px;
border-radius: 4px;
background-color: rgb(243, 243, 243);
}
}
Hi i have tried allot ways how to fix this, but i cant float div to left side. When i create div its automatically stacks in right top corner and i cant move it only with padding and margin.
My index.php example need to float:left div with class language:
<body class="menu">
<div class="wrapper">
<div class="menu-toggle">
Show menu
</div>
<div class="language">
Select lang
</div>
<header>
<nav class="menu-side">
<ul>
<li>Home</li>
<li>Login</li>
<li>Contact</li>
</ul>
</nav>
</header>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Upload files</legend>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Upload">
</fieldset>
<div class="bar">
<span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded links will apear here.
</div>
</form>
</div>
<footer>
Created by Revix © 2014
</footer>
</body>
And my css is:
html, body { height: 100%; margin-top: 0; }
body { font-family: "Georgia", serif; }
.upload { width:500px; background: #f0f0f0; border: 1px solid #ddd; padding: 20px; vertical-align: center; margin-left: auto; margin-right: auto; }
.upload fieldset { border: 0; padding: 0; margin-bottom: 10px; }
.upload fieldset legend { font-size: 1.2em; margin-bottom: 10px; }
footer { background-color: cornflowerblue; text-align: center; vertical-align: middle; min-width: 542px; }
.wrapper { min-height: 100%; margin-bottom: -100px; clear: both; }
.wrapper:after { content: ""; display: block; }
.wrapper:after, footer { height: 100px; }
header { position: fixed; margin-left: auto; margin-right: auto; }
.uploads a, .uploads span { display: block; }
.bar { width: 100%; background: #eee; padding: 3px; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); border-radius: 3px; box-sizing:border-box; }
.bar-fill { height: 20px; display: block; background: cornflowerblue; width: 0; border-radius: 3px;
-webkit-transition:width 0.8s ease; -moz-transition:width 0.8s ease; -o-transition:width 0.8s ease; transition:width 0.8s ease; }
.bar-fill-text { color:#fff; padding: 3px; }
.language { float: left; position: absolute; width: 80px; padding: 3px; }
If you wanna to see my web site: Here
Can you suggest me what to do?
Do you mean this effect? Please see my demo.
Please paste your code to jsbin.com next time. Otherwise it's not convenient for us to resolve your problem.
http://jsbin.com/yivat/1
float:left and position:absolute doesn't work.
remove position:absolute
.language { float: left; width: 80px; padding: 3px; }
Inspecting these elements in my browser they have all the CSS attribute position:absolute; set, which sets them at a absolute position within the window. But these elements seem to have no left and top position set which sets you all elements to window position 0,0 which is left top corner.
I would recommend to set the position to relative position:relative; or define specific positions for your html elements.
Floating left on a absolute positioned element will not work. Try relative to float it or position it on your page with top:px left:px;
I am using this fork code to display text on mouseover of an image.
http://codepen.io/anon/pen/hxqoe
HTML
<img src="http://placekitten.com/150" alt="some text" />
<img src="http://placekitten.com/150" alt="more text" />
<img src="http://placekitten.com/150" alt="third text" />
<div id="text"></div>
CSS
div {
display: none;
position: absolute;
}
img:hover + div {
display: block;
}
JQUERY
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
}, function() {
$('div').html('');
});
I am looking for the div text to be displayed inside each image instead of a stationary div.
Any ideas?
You actually don't need jQuery for this. It can easily be achieved with pure CSS.
In this example, I use the :after pseudo element to add the content from the alt attribute of the parent div. You can add whatever styling you want..
jsFiddle here - Updated to include a fade
HTML - pretty simple
<div alt="...">
<img src="..."/>
</div>
CSS
div {
position: relative;
display: inline-block;
}
div:after {
content: attr(alt);
height: 100%;
background: rgba(0, 0, 0, .5);
border: 10px solid red;
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
box-sizing: border-box;
text-align: center;
color: white;
padding: 12px;
font-size: 20px;
opacity: 0;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
div:hover:after {
opacity: 1;
}
Change your javascript to this:
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
$('div').css('left',$(this).offset().left + 'px');
$('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px');
}, function() {
$('div').html('');
});
And that should do the trick.
I would wrap your images in some kind of wrapper and then use CSS for the hover effect (DEMO).
HTML:
<div class="img-wrapper">
<img src="http://placekitten.com/150" alt="some text 1" />
<div class="img-desc">some text 1</div>
</div>
CSS:
.img-wrapper {
position: relative;
display: inline;
}
.img-desc {
display: none;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: #FFF;
opacity: 0.6;
padding: 5px;
}
.img-wrapper:hover .img-desc{
display: block;
}
I added an alternative solution with additional css transition to the demo.
To get a transition just control the visibility with opacity:
.img-desc {
/*...*/
opacity: 0;
/*...*/
}
.img-wrapper:hover .img-desc{
opacity: 0.6;
transition: opacity 0.4s ease-in;
}