cont-10.html

<style>
  #cont-10{
    z-index: 3;
    clip-path: polygon(100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 100%);
    transition: clip-path 1s;
  }
  #cont-10.moved{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
</style>
<div id="trans-10" class="cont-outer">
  <div class="cont contA">A</div>
  <div class="cont contB" id="cont-10">B</div>
</div>
<script>
  document.getElementById('trans-10').addEventListener('click',()=>{
    document.getElementById('cont-10').classList.toggle('moved');
  });
</script>