We Keep Coding

On state change, do animation

Currently I'm working in Vue.js and have a navigation menu that I'd like to animate. What I'm looking to do is show two li elements when a user hovers over one of the navigational buttons.
Currently what I'm doing is setting a data type of showActivities to false by default and setting that to true on mouseenter and false on mouseleave. So this has the items appearing and disappearing on hover but they're not animated. How could animation for this be done?
<ul class="navs">
<li>Schedule</li>
<li #mouseenter="showActivities = true" #mouseleave="showActivities = false">Team Activity</li>
<li v-show="showActivities">tik tak tow</li>
<li v-show="showActivities">Bejewel</li>
<li>Resources</li>
<li class="logout">Logout</li>
</ul>
<script>
export default {
name: 'SideMenu',
data() {
return {
showActivities: false,
};
},
};
</script>

okay if i got you correct you want a type of animation like a slow fade In and Out.
In vuejs transitions, state are attached to CSS classes that can be called and modified ass you want it to be. The doc is clearer about it
Vuejs Transitions
for example if you add this in your css section the transition will be a slow fade In and Out:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

simply trying to use a <span> character to call a javascript function to close dropdown menu

So I'm a total beginner in javascript and I'm just getting back into the swing of html/css, so I'm all around rusty. W3 is basically my go to and has got me started, but I've scoured google and stack overflow for a simple solution I can understand and I've come up with nothing. Can anyone explain to me what's going wrong with a simple function?
I have a drop down menu that appears from an onclick function attached to a div which basically looks like
function openMobileMenu(){
document.getElementById("mobilelinkmenu").style.display="block";
}
and that works fine, my menu pops up just fine.
When it's time to close that menu I have a <span onclick="closeMobileMenu()"> + </span> inside of that div to act as a closing button, and the code looks like this
function closeMobileMenu(){
document.getElementById("mobilelinkmenu").style.display="hidden";
}
I'm sure I'm making some rookie mistake and nothing can be that simple, but can anyone point to the source of my mistake? I just want to finish this dang menu and move on. Is it because my exit function span is inside of the opening function div and when I'm clicking on the exiting span, it's really just clicking on the opening div?
Here's the code
<div id="navbar" class="mobilemenustyle" onclick="openMobileMenu()">
<img src="images/navicon.jpg" alt="nav" width=10%>
<span onclick="closeMobileMenu()">Nav Menu</span> <span class="exit" onclick="closeMobileMenu()" > + </span>
</div>
<!--opened nav menu--> <div id="mobilelinkmenu" class="mobilemenustyle"> <ul> <li>You Are Here</li> <li>Photography</li> <li>Musicality</li> <li>DJ Life</li> <li>More Me</li> </ul> </div>
<script>
function openMobileMenu(){
document.getElementById("mobilelinkmenu").style.display="block";
document.getElementById("navbar").style.boxShadow="none";
document.getElementById("mobilelinkmenu").style.boxShadow="0px 10px 15px 0px rgba(0,0,0,0.3)";
var exit = document.getElementsByClassName("exit"), i=exit.length;
while(i--){exit[i].style.transform="rotate(45deg)";
}
var exit = document.getElementsByClassName("exit"), i=exit.length;
while(i--){exit[i].style.transition=".5s ease-in-out";
}
}
function closeMobileMenu(){
document.getElementById("mobilelinkmenu").style.display="hidden";
}
</script>

You need to call event.stopPropagation() to stop the click event from bubbling to the div with the id of "navbar" and opening the menu. When you click on the span inside the div, the onclick event handler for it is called (to close the menu), but the event will bubble up to its parent div and call its onclick event handler (opening the menu again). Using event.stopPropagation() will prevent the event from bubbling up the DOM tree.
You also need to change
document.getElementById("mobilelinkmenu").style.display="hidden";
To
document.getElementById("mobilelinkmenu").style.display="none";
"hidden" is an invalid property value for the display CSS property (it can be used with the visibility property).
.rotated{
display: inline-block;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotated:hover{
color: red;
}
.exit{
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
<div id="navbar" class="mobilemenustyle" onclick="openMobileMenu()">
<img src="images/navicon.jpg" alt="nav" width=10%>
<span onclick="closeMobileMenu(event)">Nav Menu</span> <span class="exit" onclick="closeMobileMenu(event)" > + </span>
</div>
<!--opened nav menu--> <div id="mobilelinkmenu" style="display: none;" class="mobilemenustyle"> <ul> <li>You Are Here</li> <li>Photography</li> <li>Musicality</li> <li>DJ Life</li> <li>More Me</li> </ul> </div>
<script>
function openMobileMenu(){
document.getElementById("mobilelinkmenu").style.display="block";
document.getElementById("navbar").style.boxShadow="none";
document.getElementById("mobilelinkmenu").style.boxShadow="0px 10px 15px 0px rgba(0,0,0,0.3)";
var exit = document.getElementsByClassName("exit"), i=exit.length;
while(i--){
exit[i].classList.add("rotated");
}
}
function closeMobileMenu(e){
e.stopPropagation();
document.getElementById("mobilelinkmenu").style.display="none";
var exit = document.getElementsByClassName("exit"), i=exit.length;
while(i--){
exit[i].classList.remove("rotated");
}
}
</script>

Automatically re-arrange HTML list base on numeric sort order updates [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm building a page where there is a ranked list. The items in the list are associated with a rank order number. The order numbers for each item in the list changes as users make different selection choices else where on the page. I've been looking around to see if there is a way to automatically re-arrange the list items when their rank order number changes. I've looked at some JQuery .sort() examples, those require re-building the DOM element and it does appear that I can apply any animation using those approaches. I've also looked at JQuery UI's sortable, however that seems to only allow sorting by drag and drop. I'm really looking for something like Isotope Isotope's sorting. However, I'm not able to leverage that framework due to licensing issue. To add to the challenges, each list item would contain collapsable sections so their size is not fixed.
I've originally envisioned something like this:
Initial HTML:
<ul class="sortedlist">
<li class="1">A</li>
<li class="2">B</li>
<li class="3">C</li>
<li class="4">D</li>
<li class="5">E</li>
</ul>
Browser:
---
A
---
B
---
C
---
D
---
E
---
Updated HTML:
<ul class="sortedlist">
<li class="4">A</li>
<li class="1">B</li>
<li class="5">C</li>
<li class="2">D</li>
<li class="3">E</li>
</ul>
Updated Browser:
---
B
---
D
---
E
---
A
---
C
---
Any suggestions or examples are appreciated. Thanks!

If you want to sort them. That is manageable through CSS property "disply: flex".
Try this
ul {display: flex; flex-direction: column;}
This makes the list items go vertically down. - After you've used flex, you can use order property.
ul > li:nth-child(0) {order: 2;}
order: 0 is the default value

New answer
I didn't thoroughly read your question, sorry.
Here's another simple approach that moves the items with position absolute and margin-top, the items are outside the list container though so it's not ideal.
function sortList() {
var list = document.getElementById("listToSort");
var item = list.firstElementChild;
while(item) {
item.style.marginTop = ((parseFloat(item.className) - 1) * 20) + "px";
item = item.nextElementSibling;
}
}
sortList();
// Testing example below
var item1 = document.getElementById("listToSort").getElementsByClassName("1")[0];
var item2 = document.getElementById("listToSort").getElementsByClassName("2")[0];
item1.className = "2";
item2.className = "1";
setTimeout(function() {sortList();},1500);
#listToSort>li {
position: absolute;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
<ul id="listToSort" class="sortedlist">
<li class="4">A</li>
<li class="1">B</li>
<li class="5">C</li>
<li class="2">D</li>
<li class="3">E</li>
</ul>
Original answer
Here's a javascript solution, it iterates all list items until they're in order by moving the lowest scored item to the end and then moving on to the second-lowest scored item etc.
function sortList() {
var list = document.getElementById("listToSort");
var listItem = list.firstChild;
var currentScore = 1;
while (true) {
if (listItem.className == currentScore) {
currentScore++;
list.appendChild(listItem);
listItem = list.firstChild;
} else if (listItem.nextSibling) listItem = listItem.nextSibling;
else break;
}
}
sortList();
<ul id="listToSort" class="sortedlist">
<li class="4">A</li>
<li class="1">B</li>
<li class="5">C</li>
<li class="2">D</li>
<li class="3">E</li>
</ul>

angularJs animate ng-repeat entrance

I've got this simple list of countries and I'm trying to get them to animate on entrance but I can't seem to find what's stopping this from working?
<ul>
<li ng-repeat="country in countries" type="country" class="slide">
<a ui-sref="state5"> {{country.name}}</a>
</li>
</ul>
css file:
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
}
animate.js file:
countryApp.animation('.slide', [
function() {
return {
enter: function(element, doneFn) {
jQuery(element).slideIn(1000, doneFn);
}
}
}]
Can someone perhaps clarify this for me? Thanks

your css style only working for firefox. if you want chrome use -webkit prefix
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
-webkit-transition:0.5s linear all;
-webkit-transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
-webkit-transform:translateY(0);
}

ngAnimated on nghide doesn't work in my case

http://plnkr.co/edit/cPyi8lukckyo9EFReI9V?p=preview
The delete fade away but not when I click on the checkbox, any idea where I've gone wrong?
<li class="task" ng-repeat="task in tasks" ng-hide="task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
css
.task.ng-enter,
.task.ng-move {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:0;
}
.task.ng-enter.ng-enter-active,
.task.ng-move.ng-move-active {
opacity:1;
}
.task.ng-leave {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:1;
}
.task.ng-leave.ng-leave-active {
opacity:0;
}

you need to include the ng-hide class in your animations
take a look at this, this is in case you want just to hide the tasks and not delete them
http://plnkr.co/edit/xrKfNqaTxNL6xw1NBAkO?p=preview
i forked your example into this
using ng-hide ng-hide-add

This is happening because you are only hiding it, not removing it.
You will need to use ng-if in this case:
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-if="!task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>
Here's your demo
EDIT OP was looking for checkbox to apply a strike through, pause, then fade out.
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-hide="task.done" ng-class="(task.done)?'strike':''">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>
Added following CSS:
.task.ng-hide {
-webkit-transition: 0.25s linear all;
transition: 0.25s linear all;
opacity: 0;
}
.task.ng-hide-add {
-webkit-transition-delay: 2s;
transition-delay: 2s;
display: block !important;
}
.strike {
text-decoration: line-through;
}
Demo v2

Toggling checkbox just make item hidden. But del() function remove item from scope.

Remove that ng-hide="task.done" from <li> and use ng-if="!task.done"
Check this out
Working Demo
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-if="!task.done">
<input type="checkbox" ng-model="task.done">{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>