I'm having trouble displaying a line in different directions. While vertical and horizontal lines work fine, the diagonal direction requires rotation before it appears correctly. The issue is that it initially displays vertically before rotating to 135 degrees. I understand that the element needs to be displayed first before being rotated. How can I resolve this problem?
Check out a working demo
HTML:
<div id="app">
<button @click="toggle">Toggle</button>
<span>Direction: {{ direction }}</span>
<transition name="line-transition">
<div v-if="direction"
class="line"
:class="direction">
</div>
</transition>
</div>
VueJS
new Vue({
el: "#app",
data: {
direction: null
},
methods: {
toggle: function(){
const arr = [ 'vertical', 'horizontal', 'diagonal']
/* randomly select */
this.direction = arr[Math.floor(Math.random() * arr.length)]
/* hide line before toggling direction */
setTimeout(() => {
this.direction = null
}, 1000)
}
}
})
CSS:
.line.vertical {
width: 10px;
height: 100px;
}
.line.horizontal {
width: 100px;
height: 10px;
}
.line.diagonal {
transform: rotate(135deg);
width: 10px;
height: 100px;
}
.line-transition-enter-active,
.line-transition-leave-active {
animation: slidein 1s;
}
@keyframes slidein {
from {
transform: scaleX(0) scaleY(0);
}
to {
transform: scaleX(1) scaleY(1);
}
}