I have a vue component:
<transition-group name="list">
<task v-for="task in tasks" v-bind:key="task.id" v-bind:task="task" class="list-task"></task>
</transition-group>
With a simple transition:
.list-task {
transition: all 0.5s;
}
When I add an element to the tasks array with unshift I get a nice animation, where the existing elements are sliding down to make room for the new element.
However, when I remove an element from the array with splice, that element just just suddenly disappears.
How can I make it animate out like with adding an element?
You probably forgot to specify the transition classes. This will give you a basic fade-out:
.list-leave-active {
transition: all 0.5s;
opacity: 0;
}
Please refer to the (excellent) docs on Transition Classes.
Related
When changing the background-color, CKEditor wraps the selected content in a span element where the inline style is set.
I have an application to create interactive videos: it is possible to stop the playback in desired moments and, in these pauses, the viewer can jump to key moments of the video, or answer to quizzes, returning to specific points of the video if the answer was wrong, and so on. To create this interactive layer above the player I use the CKEditor with some custom plugins to create the interactive elements.
One of the plugins is used to create span elements with a custom attribute data-player-control:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">My element</span>
The value of the data-player-control attribute is not fixed (it can be specified in the plugin), and it is used to control the exhibition of the video.
When the editor is used to change the element background color, it wraps the element text in a new span, what results in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">
<span style="background-color:#FF0000">My element</span>
</span>
These two nested span elements, with two distinct background colors, are undesired.
What I need is the inline style to be applied to the existing span element, resulting in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play" style="background-color:#FF0000">
My element
</span>
How can this be achieved?
Using dataFilter or htmlFilter is not a feasible solution, as they are executed in input or output data, when entering or existing the inline instance of the CKEditor. Using a transformation also is not a solution, as it uses a simplified form to represent the elements, not the real DOM.
Is there any callback function to use while editing the content (so I can change the DOM according to my needs)?
A simple solution is to listen to the change event in the editor instance and then modify the DOM in event.editor.ui.contentsElement.$ as desired.
You can try to use custom styles definition which is used for adding background-color. The colorButton_backStyle can be set in the editor config.
To override span element with some custom attributes, you can use:
config.colorButton_backStyle = {
element: 'span',
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So basically overrides attribute is used when applying background-color and there is a span with such attribute - it is replaced (but then the attribute also gets removed ). You can add attributes:
config.colorButton_backStyle = {
element: 'span',
attributes: { 'data-player-control': 'play' },
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So that overriding span also has your attribute. The problem with this solution is that:
When applying background color to other elements, span will also have data-player-control attribute.
When removing background color, the whole span gets removed.
The above solution may not fit your needs. Maybe there is different approach to the problem you are trying to solve?
As I understand from the question you would like the HTML to have defined structure the whole time (not only as output data), is that correct? What problem is structure with nested spans causing in your application/implementation?
I have a carousel that takes a state of {pages: [...], currentPage: 0}. If I set currentPage = 1 I want the carousel to slide left. The same thing should happen if I increase the number again, and it should slide right I decrease it.
I can't work out how this should be done with immutable data. The animation shouldn't be represented in the state object (should it?), but storing a property on the React component removes its "pure" functional nature.
What's the best way to approach this problem?
Just show me an example
This doesn't use Immutable.js, but the current property is just a number, which is immutable in JS, so in some regards it's the same idea:
http://jsbin.com/ligejacolo/edit?js,output
IMO the best option is ReactCSSTransitionGroup
+1 for the unnecessarily snarky reference to ReactCSSTransitionGroup in the comments, if you can use that.
After that, let the browser manage state via CSS transitions
I would store the pages and currentPage as props, regardless of whether the values are Immutable.js instances (props are a stateful part of your UI, just like state, don't let the name fool you!). When they're stored as props, it provides a useful API to the users of your component.
If you're using CSS transitions then at any given moment you should be able to render the markup and classes based on this information.
For example, given the (over-simplified markup):
<div class=container>
<!-- set the class to something like "inner pane2" to go to the second pane -->
<div class=inner>
<span class=pane>...</span>
<span class=pane>...</span>
<span class=pane>...</span>
</div>
</div>
And some CSS like:
.container {
position: relative;
}
.inner {
position: absolute;
left: 0;
transition: left 0.3s ease-in-out;
}
.pane {
width: 100px;
}
.inner.pane2 {
left: -100px;
}
.inner.pane3 {
left: -200px;
}
The browser takes care of mid-transition changes to the properties.
Often times you'll need to know when the animation is done, which you can accomplish with a transitionend listener and isAnimating flag (which I would store in the state, not the props). Set isAnimating when currentPage changes and clear it on transitionend.
You'll also often need to know which direction you're transitioning, which you can accomplish with a previousPage prop.
Finally, if you're just using JavaScript
Keep a reference to the current transition in the state (possibly the jQuery selection used to start the animation, if that's what you're using). When the transition is done, remove the reference. If the currentPage changes mid-transition, call .stop() on the selection (or whatever API you're using).
I would like to implement an HTML5 animation that involves a bit more than just moving an item from point A to point B. That's why I am considering using keyframes rather than transitions. However, I just want the animation to run once, and only when triggered.
The problem is twofold:
1) When the animation is finished, the item returns to its start position. Is there a way to make it stay at the end position until further notice?
2) Is there a way to restart the animation later from Javascript?
The other possible solution I see would be to chain a few transitions using the onTransitionEnd event.
What is the best solution here considering performance? I am only targeting Webkit browsers, including mobile.
EDIT: based on the comment by #Christofer-Vilander I made a JSfiddle, which basically does what I wanted. Thanks!
HTML:
<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>
Javascript:
document.getElementById('start').addEventListener('click', function(e) {
document.getElementById('ball').classList.add('remove');
});
document.getElementById('reset').addEventListener('click', function(e) {
document.getElementById('ball').classList.remove('remove');
});
CSS:
.ball {
width:100px;
height:100px;
border-radius:100px;
background-color:darkred;
position:absolute;
top:100px;
left:200px;
}
#-webkit-keyframes slide {
from { top:100px; left:200px; }
to { top:100px; left:-100px; }
}
.remove {
animation: slide 1s linear;
-webkit-animation: slide 1s linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
Add a class in the html element with Javascript, and the desired css animation ruleset for this class. Use animation-fill-mode: forwards; for the animation to run once.
Then, remove the class from the element to re-run animation onClick.
i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document
It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie:
.parent { overflow: hidden; }
.parent:hover { overflow: visible; }
.child { opacity: 1; transition: opacity 1s linear; }
.parent:hover .child { opacity: 0; }
The transitions will not work on the child. Remove the "overflow:visible" property from the hovered parent, and everything is ok. It seems that changing the overflow on the child itself does not cause any issues, which is weird.
Here's a js fiddle for this http://jsfiddle.net/qzMj9/13/
does anyone know why this happens? is it a ff bug or the correct functionality? it works on webkit!
This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child, which means no transition start, since that's triggered by computed style changes.
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!