Is there a concept for a path when a div changes its location?

Question

In the code below there is divone that "moves" between two containers divwhen clicked

new Vue({
  el: "#container",
  data: {
    left: true
  }
})

#container {
  width: 500px;
  display: flex;
  justify-content: space-between;
}

#left {
  width: 100px;
  background-color: red;
}

#right {
  width: 100px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="container">
  <div id="left">
    <div id="element" v-if="left" v-on:click="left=!left">element</div>
  </div>
  <div id="right">
    <div id="element" v-if="!left" v-on:click="left=!left">element</div>
  </div>
</div>

Run codeHide result

Is there a concept of a path when such an element (with the same id) changes its location in the DOM render? If so: is there a way to visualize his transition from one place to another (through a slide on this way)?

Answer 1

OK, thanks for better explaining your use case to me. Now it is clear what you need.

Please check out the modified demo below or in this fiddle .

, , . "" Vue-js-toggle-button .

, , , , , .

, ?

animation transition: all 0.5s ease; :

• left-position margin-left: 0
• right-position margin-left: calc(75% - 20px); . -20px - , , 75%, 25%, , .

include, , .

,

• - , , . , , , , .
• - - , .

, , , , .

Vue.use(window['vue-js-toggle-button'].default)

new Vue({
  el: "#container",
/*  components: {
  	toggleButton: window['vue-js-toggle-button']
  },*/
  data: {
    include: true,
    filterTags: 'even odd',
    articles: [{
    	id: 0,
    	title: 'Test0',
      tags: ['even']
    },
    {
    	id: 1,
    	title: 'Test1',
      tags: ['odd']
    },
    {
    	id: 2,
    	title: 'Test2',
      tags: ['even']
    },
    {
    	id: 3,
    	title: 'Test3',
      tags: ['odd']
    },
    {
    	id: 4, // just to test even & odd exluding
    	title: 'Test4',
      tags: ['no number']
    }
    
   ]
  },
  computed: {
  	filtered () {
    	return this.articles.filter((article) => 
      	article.tags.some((tag) => 
        {
          let result = this.filterTags && this.filterTags.indexOf(tag) !== -1
          return this.include ? result: !result;
      	})
      )
    }
  },
  methods: {
  	updateFilterInclude ({value}) {
    	console.log(value)
      this.include = value
    }
  }
})

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.vue-js-switch#changed-font {
  font-size: 16px !important;
}

ul {
  list-style-type: none;
}

.flip-list-move {
  transition: transform 0.5s;
}

#container {
  width: 200px;
  /* border: 1px solid black; */
  position: absolute;
  left: 0;
  padding: 5px;
}

.animation {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.left-position {
  background-color: green;
  /*transform: translate(0, 0);*/
  margin-left: 0;
 }

.right-position {
  background: red;
  /*transform: translate(100%, 0);*/
  margin-left: calc(75% - 20px);
}

input {
  width: calc(100% - 14px);
  padding: 5px;
}

.slider {
  border: 1px solid gray;
  margin-top: 5px;
  padding: 5px;
  border-radius: 10px;
}
.element {
  width: 25%;
  cursor: pointer;
  padding: 10px;
  /* border: 1px solid black; */
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://rawgit.com/euvl/vue-js-toggle-button/master/dist/index.js"></script>
<div id="container">
  Filter tags<input v-model="filterTags"/>
    <div class="slider">
      <div class="element animation" @click="include = !include" :class="{'left-position': include, 'right-position': !include}">
      {{include ? 'include' : 'exlude'}}
      </div>
    </div>
    <hr/>
    <toggle-button
      id="changed-font"
      :width="200"             
      :height="40"
      :color="{checked: 'green', unchecked: 'red'}"
      :labels="{checked: 'include', unchecked: 'exclude'}" :value="include" @change="updateFilterInclude"> {{include ? 'include' : 'exlude'}}</toggle-button>
    <transition-group name="flip-list" tag="ul">
      <li v-for="article in filtered" :key="article">
        {{article.tags.join(' ')}} - {{article.title}}
      </li>
    </transition-group>
</div>

Hide result

Answer 2

script, div, :

move( document.querySelector("#element"),  document.querySelector("#destination") ); 

function move( element, destination){

  var destinationElement= element.cloneNode(true);//https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode
  
  destinationElement.style.visibility= "hidden";
  destination.appendChild( destinationElement );
  
  animate( element, destinationElement );
  
  
}

//it could be better to use jquery animate: http://api.jquery.com/animate/
function animate( element, destination, step ){
  
  if( !step ) 
    step= 0;
    
  var steps= 100;
  var origin= element.getBoundingClientRect();
  element.style.position= "absolute";
  element.style.top= ( origin.top * ( (steps - step ) / steps ) + 
                     destination.getBoundingClientRect().top * (  step / steps ) ) + "px";
  element.style.left= ( origin.left * ( (steps - step ) / steps ) + 
                     destination.getBoundingClientRect().left * (  step / steps ) ) + "px";

  if( step < steps ){
    setTimeout( function(){
      animate(element, destination, ++step );
    },50);
  }else{
    element.parentNode.removeChild(element);
    destination.style.visibility= "visible";
  }
}

#origin{
  width: 60px;
  height: 150px;
  border: solid 1px red;
}
#destination{
  width: 100px;
  height: 50px;
  position:relative;
  top: -50px;
  left:200px;
  border: solid 1px green;
}

#element{
  
  width: 10px;
  height: 20px;
  border: solid 1px blue;
  background-color: blue;
}

<div id="origin">
  <div id="element">
  </div>
</div>
<div id="destination">
</div>

Hide result