Please take a look at this (https://dev.smartbothub.com/4444/v1/api/Dev-master_bot/getBot) in IE 11.Click on a dropdown button on the right side of the webchat screen on sliding down the webchat flickers.
Here is the css used for animation.
.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation: 0.5s slide-up;
animation: 0.5s slide-up;
}
.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation: 0.5s slide-down;
animation: 0.5s slide-down;
}
#-webkit-keyframes slide-up {
from {
height: 0;
}
to {
height: 80%;
}
}
#keyframes slide-up {
from {
height: 0;
}
to {
height: 80%;
}
}
#-webkit-keyframes slide-down {
from {
height: 80%;
}
to {
height: 0;
}
}
#keyframes slide-down {
from {
height: 80%;
}
to {
height: 0;
}
}
This only seems to happen in IE11. I'm using angular 1.5 Please help me with this issue.
Related
See current Spinner
Hello,
I like to put the current spinner inside the Login button, but it is located outside of the button. Any help? Thank you in advance!
Here are my codes.
[Login.js] try to load when user clicks the Login button.
...
<div className="auth-form-inputLine auth-form-submitBtn-container" id="auth-login-submitBtnContainer">
<button onClick={this.handleFormSubmit} className="auth-form-submitBtn">
{this.state.submitting ? <ButtonLoader /> : <h2 className="text">Login</h2>}
</button>
</div>
...
[ButtonLoader.js] There are moving three dots.
import React from "react";
import "./styles/ButtonLoader.css";
const ButtonLoader = () => {
return (
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
);
};
export default ButtonLoader;
[ButtonLoader.css]
.spinner {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
I'm trying to do a slide in animation when ng-show is invoked.
The element will slide in from the right.
If I'm using 1.1.5 , it works perfectly as show in this fiddle (https://jsfiddle.net/sbcjdqwk/1/)
I understand that ng-animate has been deprecated since 1.2 and I have made the necessary adjustments for 1.5.5.
.slide.ng-enter {
position: relative;
left: -100%;
}
.slide.ng-enter.ng-enter-active {
transition: all 1s;
left: 0;
}
.slide.ng-leave {
position: relative;
left: 0;
}
.slide.ng-leave.ng-leave-active {
transition: all 1s;
left: -100%;
}
Somehow it's still not working. Could anyone please advise? Thanks!
Fiddle here: https://jsfiddle.net/xrp1h592/3/
.animate-show-hide.ng-hide-remove {
left: 100%;
position: relative;
}
.animate-show-hide.ng-hide-remove-active {
left: 0;
}
.animate-show-hide.ng-hide-add {
left: 0%;
position: relative;
}
.animate-show-hide.ng-hide-add-active {
left:100%;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: ease-in-out 300ms;
}
Using ng-hide-add and ng-hide-remove solves the issue.
And using "ease-in-out" rather than "linear" makes it more smooth.
Plunkr link here:
https://plnkr.co/edit/FeX0hG6nXnVz4h3H9oow?p=preview
inside my react app, users are able to enter data that is saved on the server. The data is saved immediatly, users don't have to press any "save" button. I want to display a short animation (similar to https://codepen.io/Sixclones/pen/VBdeXL) whenever I'm sending data to the server. After doing some research, I figured out that I should use react-transition-group (http://reactcommunity.org/react-transition-group/css-transition).
I made a component savingIcon:
const SavingIcon: React.SFC<SavingIconProps> = ({
className,
saving,
}) => {
return (
<div className={ classNames(className, "saving-icon") }>
<CSSTransition
timeout={ 200 }
classNames="saving"
in={ saving }
>
<div className="saving-balls">
<div className="saving-balls__item" />
<div className="saving-balls__item" />
<div className="saving-balls__item" />
</div>
</CSSTransition>
</div>
);
}
Whenever something is being saved, saving is set to true and I'd like to display the animation.
Inside saving-icon.scss I put the following CSS (I tried out several approaches, therefore there might be some unnecessary css):
#keyframes bouncing {
0% {
transform: translate3d(0, 10px, 0) scale(1.2, 0.85);
}
100% {
transform: translate3d(0, -20px, 0) scale(0.9, 1.1);
}
}
div.saving-icon {
position: sticky;
top: 15vh;
display: flex;
flex-direction: column;
justify-content: end;
height: 84vh;
$anim-drt: 0.4s;
$anim-ease: cubic-bezier(.6, .05, .15, .95);
.saving-enter {
div.saving-balls{
&__item {
background-color: $success-color;
transition: background-color 20ms;
}
}
}
.saving-enter-active {
div.saving-balls{
&__item {
background-color: $active-color;
transition: background-color 20ms;
}
&:nth-child(1) {
animation: bouncing $anim-drt alternate infinite $anim-ease;
transition: animation 1000ms;
}
&:nth-child(2) {
animation: bouncing $anim-drt $anim-drt/4 alternate infinite
$anim-ease backwards;
transition: animation 1000ms;
}
&:nth-child(3) {
animation: bouncing $anim-drt $anim-drt/2 alternate infinite
$anim-ease backwards;
transition: animation 1000ms;
}
}
}
.saving-exit {
div.saving-balls{
&__item {
background-color: $active-color;
transition: background-color 20ms;
}
&:nth-child(1) {
animation: bouncing $anim-drt alternate infinite $anim-ease;
transition: animation 1000ms;
}
&:nth-child(2) {
animation: bouncing $anim-drt $anim-drt/4 alternate infinite
$anim-ease backwards;
transition: animation 1000ms;
}
&:nth-child(3) {
animation: bouncing $anim-drt $anim-drt/2 alternate infinite
$anim-ease backwards;
transition: animation 1000ms;
}
}
}
.saving-exit-active {
div.saving-balls{
&__item {
background-color: $success-color;
transition: background-color 20ms;
transition: animation 1000ms;
}
}
}
div.saving-balls {
width: 3em;
height: 10vh;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
&__item {
width: 0.7em;
height: 0.7em;
border-radius: 50%;
background: $success-color;
}
}
}
My issue is the following:
Usually saving something only takes very short time; not enough time to actually run the animation once. My balls just become red for a split second and return being green (active and success color are some type or red and green). I would like to have the animation running a longer period of time, something around 2 seconds. I tried some hacks using effects, states and timeouts, but they didn't work well and I'd rather use a correct solution instead of some dirty hack.
I'm not very familiar with css transitions and animations, neither with react-transition-group. I hope for some existing easy way to play an animation for a certain minimum amount of time (if the connection is weak, the animation should show until the data is saved).
As an alternative, I accept different suggestions on how to tell the user that his input has been saved instead of an animation at the corner of the page. Currently, everything the user enters is saved, but he might not notice that this happened and search for a "save" button.
For anybody with a similar issue: I solved the issue by using useState and only changing the state value for saving if it indeed changed. I didn't use a transition group.
The working saving component:
const SavingIcon: React.SFC<SavingIconProps> = ({
className,
saving,
}) => {
const [ isSaving, setIsSaving ] = useState(false);
useEffect(() => {
if (isSaving !== saving) setIsSaving(saving);
}, [ saving ]);
return (
<div className={ classNames(className, "saving-icon", {
"saving-active": isSaving
}) }>
<div className="saving-balls">
<div className="saving-balls__item" />
<div className="saving-balls__item" />
<div className="saving-balls__item" />
</div>
</div>
);
}
scss:
#keyframes bouncing {
0% {
transform: translate3d(0, 10px, 0) scale(1.2, 0.85);
}
100% {
transform: translate3d(0, -20px, 0) scale(0.9, 1.1);
}
}
div.saving-icon {
position: fixed;
top: 86px;
right: 1.3vw;
$anim-drt: 0.4s; /* duration */
$anim-ease: cubic-bezier(.6, .05, .15, .95);
&.saving-active {
div.saving-balls {
div.saving-balls__item {
background-color: $active-color;
transition: background-color 20ms;
&:nth-child(1) {
animation: bouncing $anim-drt alternate infinite $anim-ease;
}
&:nth-child(2) {
animation: bouncing $anim-drt $anim-drt/4 alternate infinite
$anim-ease backwards;
}
&:nth-child(3) {
animation: bouncing $anim-drt $anim-drt/2 alternate infinite
$anim-ease backwards;
}
}
}
}
div.saving-balls {
width: 3em;
height: 30px;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
&__item {
width: 0.7em;
height: 0.7em;
border-radius: 50%;
background: $success-color;
}
}
}
I do an app with Angularjs and ui.Bootstrap
I use a $routeProvider so I have an <ng-view></ng-view> in my main page,
with animate.css, I want to animate enter and leave of my view, but bootstrap doesn't had both class ( .myclass-enter and .myclass-leave )
I don't know why?
This is not responsibility of Bootstrap to animate ng-view element. But you can easily achieve this with ngAnimate module (remember to inject it into your main app module). All you need to do is to implement couple of classes.
For example to make view slide you can write this classess:
<div ng-view class="slide"></div>
and CSS:
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 1s ease;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter-active,
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}
Here is some examples I put together of this approach.
thinx I think I forget vendor prefix on my css class, so it works with animate.css now
.slide.ng-enter,
.slide.ng-leave {
}
.slide.ng-enter {
animation-delay: 1s;
}
.slide.ng-enter-active {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.slide.ng-leave {
}
.slide.ng-leave-active {
-webkit-animation-name: hinge;
animation-name: hinge;
}
I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:
http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview
With the key bit being this CSS here:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
display: block !important;
}
.accordion-body.ng-hide-add{
}
.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
height:0;
}
But I can't figure out how to get it to work for opening the item. I'm obviously doing something braindead - what am I missing?
Got it working with the following CSS:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.accordion-body.ng-hide-remove {
display: block !important;
height: 0px;
}
.accordion-body.ng-hide-remove.ng-hide-remove-active {
height: 100px;
}
.accordion-body.ng-hide-add{
height: 100px;
}
.accordion-body.ng-hide-add.ng-hide-add-active {
height: 0;
}
You messed up a class name is all.