I need to make a slide animation on vue.js, but I don’t want to use position:absolute , since this requires a fixed height for the parent block.

I tried to add display:flex to .slider and it works, but the slide block during animation flattens the width, plus an indent between the blocks.

How to do it correctly?

https://jsfiddle.net/mezhevikin/eywraw8t/358967/ .

html:

 <div id="app"> <div class="slider"> <transition name="slide"> <div class="text" :key="index"> {{ items[index].text }} </div> </transition> </div> <a @click="next" href="#">Next</a> </div>

css:

  body { background-color: #cccccc; } #app { width: 200px; background-color: #ffffff; margin: 0 auto; padding: 10px; } .slider { overflow: hidden; display: flex; } .slide { width:100%; } .slide-leave-active, .slide-enter-active { transition: 0.5s; } .slide-enter { transform: translate(100%, 0); } .slide-leave-to { transform: translate(-100%, 0); }
  • <transition name="slide" mode="out-in"> - without position absolute works fine in your example, but you cannot achieve the effect of blending during animation. Although I did it in one project, I wouldn’t find and only remember how exactly the code would be. But I can show a military example - Artem Gorlachev
  • @ArtemGorlachev Hi. Yes, I know about out-in. But it is necessary that at the same time, one block leaves, the second leaves - user2168735
  • one
    Yes, I dug up at myself, all the same absolute in my solution. But catch the solution to your problem - .slide-enter, .slide-leave-to { position: absolute; } .slide-enter, .slide-leave-to { position: absolute; } - the height of the parent is saved, if set only during the animation - Artem Gorlachev
  • @ArtemGorlachev thanks. Works until the pitfalls are not found. Make the answer, I will mark it as a solution. - user2168735 1:51 pm
  • @ArtemGorlachev All the same, I found the pitfalls. in ios 8,9,10. looks kosyachno. Although in ie11 it works - user2168735

0