d3js Opacity Transition Not Working as Expected - css

I have a group I want to animate form 0 opacity to 1. I've animated it from 1 to 0 fine, but going the other way is strange.
The below code-
showSelection.transition()
.duration(animate ? 300 : 0)
.style('opacity', 1)
.on('end', () => {
selection.style('pointer-events', 'inherit');
});
Is resulting in opacity: 9.09815e-08; pointer-events: none;
I made the opacity value something very high .style('opacity', 100000000) and now i'm getting some more like opacity: 9.25965; pointer-events: none;
Does anyone know what would cause this?

I guess I needed to set the opacity to 0 before animating it to 1.
showSelection.transition()
.style('opacity', 0)
.duration(animate ? 300 : 0)
.style('opacity', 1)
.on('end', () => {
selection.style('pointer-events', 'inherit');
});

Related

How to animate conditional elements in React

I have a React application. I am using React Spring for overall animations. I am not able to animate 2 things -
The animation I am experimenting with is a simple opacity animation.
import { useSpring, animated } from "react-spring";
/***
Some code
***/
const styleProps = useSpring({
to: { opacity: 1 },
from: { opacity: 0 }
});
1) Is conditional elements. Please refer code below -
<section>
{!flag ? (
<animated.div style={styleProps}>
Some random text
</animated.div>
) : (
<animated.div style={styleProps}>
To appear with animation
</animated.div>
)
}
</section>
The issue is that the animated.div of react-spring does not animate the same. What is the right way? Is there a way to animate the same without react-spring?
2) I have a conditional bootstrap className attached based on a flag. I want to animate the same
<animated.div style={styleProps} className={classnames({
"col-lg-6": !flag,
"col-lg-12": flag
})}
>
Random Content
</animated.div>
For this also, the issue is that it is not animating. What is the right way?
Yo have a lot of question. I can answer part of it and maybe you will understand it better.
Your example of useSpring animation is triggered only once. And when you switch between components with the conditional render it will no longer animate.
But you can re-trigger the animation in useSpring, if you change the 'to' parameter conditionally (and leave the render to react-spring).
const styleProps1 = useSpring({
to: { opacity: flag ? 1 : 0 },
from: { opacity: 0 }
});
const styleProps2 = useSpring({
to: { opacity: flag ? 0 : 1 },
from: { opacity: 0 }
});
<section>
<>
<animated.div style={styleProps1}>
Some random text
</animated.div>
<animated.div style={styleProps2}>
To appear with animation
</animated.div>
</>
</section>
You have to use absolute positioning if you want the element to appear in the same place.
You can achieve similar effect with useTranstion also with absolute positioning. In this case the element dismounted at the end of animation. So if you have mouse click problems with the useSpring method you can try to switch to useTransition.
Maybe it also answer your second questiona as well. I am not familiar with bootstrap.

What is the correct way of translating with onclicks with react-spring

const props = useSpring({
transform: toggle ? "translateX(-200px)" : "translateX(0)",
opacity: toggle ? 1 : 0
});
I currently have a div with above styles and opacity works fine with the onclicks, but i'm having trouble with translation.
Basically i want to animate sort of a slide out div. What would be the correct way of going about it?

angular animations not working for ng-show when changing class using ng-class

I want to create a slider for some objects that are contained in an unordered list, using ng-show and animations. I have this working well when the objects are sliding in one direction.
However, when I want the user to be able to slide objects left or right, using ng-class to change the class, the animations no longer work.
The html for the left/right case is:
<div class="slide-holder">
<ul class="slide-list">
<li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
Hello There 1! How are you?</li>
<li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
Hello There 2! How are you?</li>
<li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
Hello There 3! How are you?</li>
<li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
Hello There 4! How are you?</li>
</ul>
</div>
The functions in the controller for changing the direction are:
$scope.left = function() {
$scope.direction === 'left'
if($scope.directionElement > 0)
$scope.directionElement = $scope.directionElement - 1;
};
$scope.right = function() {
$scope.direction === 'right'
if($scope.directionElement < 3)
$scope.directionElement = $scope.directionElement + 1;
};
The transitions css looks like this:
.slide-object-left.ng-hide-add,
.slide-object-left.ng-hide-remove {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
position:absolute;
}
.slide-object-left.ng-hide-add {
left:100%;
}
.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
left:0;
}
.slide-object-left.ng-hide-remove.ng-hide-remove-active {
left:-100%;
}
I have created a plnkr to show both cases: http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview
EDIT 1: I've updated the plnkr to fix the '===' mistake in the controller which was causing the switching of direction to malfunction, as per the answer by Theoretisch. However, the main ng-class problem and animation problem remains. Here is the update plnkr: http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview
The reason why the animation isn't working is because the === in the functions of your controller.
Instead of the === you should use just = because you don't want to compare $scope.direction with your string.
$scope.left = function() {
$scope.direction = 'left'
if($scope.directionElement > 0)
$scope.directionElement = $scope.directionElement - 1;
};
$scope.right = function() {
$scope.direction = 'right'
if($scope.directionElement < 3)
$scope.directionElement = $scope.directionElement + 1;
};
Now the animation works again.
But there are some more things to do if you want a good and correct animation.
One of them e.g. is to change your css.
If you slow down your animation you can see that the wrong slide-object is animated.
Just change this to correct it:
.slide-object-left.ng-hide-add {
right:-100%;
}
.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
right:0;
}
.slide-object-left.ng-hide-remove.ng-hide-remove-active {
right:100%;
}
.slide-object-right.ng-hide-add {
left:-100%;
}
.slide-object-right.ng-hide-remove,
.slide-object-right.ng-hide-add.ng-hide-add-active {
left:0%;
}
.slide-object-right.ng-hide-remove.ng-hide-remove-active {
left:100%;
}
I switched right to left and changed additionally the algebraic sign.
You can find the plunk with my changes HERE.
EDIT:
I'm not sure why the animation is so buggy. I think it is because the ng-class.
I deleted it and edited your ng-show.
You can see the edited Plunk HERE.
It's not the best solution, but it solves your problem for now I hope.
(Maybe you can improve it with THIS fiddle)

Is it possible to split a detached ruleset in less (into property + value)?

I am trying to make a less mixin that receives a detached ruleset. Is there a way to extract or split the detached ruleset into property + value?
#ruleset : {opacity:.5};
.myMixin(.4s, #ruleset);
.myMixin(#duration, #ruleset){
#ruleset(); <-- looking to split this so I can zero out the property
}
I understand I am able to use some JS in less and I have even used Math.random() before. Maybe I can leverage something like split()?
You can represent your ruleset as array:
#ruleset: opacity .5, color red;
So this #ruleset is two-dimensional array: [[opacity, .5], [color, red]].
Then you can go through array and do what you want with key and value pairs.
#ruleset: opacity .5, color red;
.myMixin(
#duration,
#array,
#iterator: 1
) when(#iterator <= length(#array)) {
// Get key and value from array
#name: extract(extract(#array, #iterator), 1);
#value: extract(extract(#array, #iterator), 2);
// Here you have current #name, #value and #duration
.property-#{iterator} {
duration: #duration;
name: #name;
value: #value;
}
// Next iteration
.myMixin(#duration, #array, #iterator + 1);
}
.myMixin(.4s, #ruleset);
This code will generate the following css:
.property-1 {
duration: 0.4s;
name: opacity;
value: 0.5;
}
.property-2 {
duration: 0.4s;
name: color;
value: red;
}
IMO:
I recommend you to avoid complex logic in less. It would be difficult to understand for the new team member how does this code work. And you will forget how this code works after a couple of weeks.
Styles must be as simple and clear as it can be.

ReactCSSTransitionGroup troubles - trying to get smooth slide in/out animation

I'm writing a questionnaire system in react and want to get the questions smoothly transitioning in and out.
Here's the render method for my component that displays the questions within.
render () {
const { loadingQuestion, question, userId, actions } = this.props;
const q = this.renderQuestion(question, (...args) => actions.answerQuestion(userId, ...args), (...args) => actions.skipQuestion(userId, ...args));
return (
<ul className="questions">
<ReactCSSTransitionGroup
transitionName="question"
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
{q}
</ReactCSSTransitionGroup>
</ul>
);
}
And also the css I'm using at the moment to achieve the vertical transition:
.question-enter {
transform: translateY(100%);
}
.question-enter.question-enter-active {
transform: translateY(0%);
transition: transform 1000ms ease-in-out;
}
.question-leave {
transform: translateY(0%);
}
.question-leave.question-leave-active {
transform: translateY(-100%);
transition: transform 1000ms ease-in-out;
}
Here's a link to a page showing the current behaviour:
http://price-it.co:8080/frame
Does anyone know why this css doesn't cause the question to slide out and instead just causes it to disappear?
Thanks!
Your example is not working in my browser (I got app.js:12Redux DevTools could not render. Did you forget to include DevTools.instrument() in your store enhancer chain before using createStore()? error).
But I could say I have the same kind of experience with CSSTransitionGroup, so I decided to use <TransitionGroup> with Velocity instead - sure it's a little bit more jQuery-style, but it obviosely works better then css animation.

Resources