मैं अलग-अलग दिशाओं में एक लाइन प्रदर्शित करने की कोशिश कर रहा हूँ। लंबवत और क्षैतिज दोनों दिशाएँ अपेक्षा के अनुरूप काम करती हैं। लेकिन विकर्ण दिशा के लिए मुझे इसे प्रदर्शित होने से पहले इसे घुमाने की जरूरत है। समस्या यह है कि यह लाइन को लंबवत रूप से प्रदर्शित करता है और फिर 135deg पर घूमता है। मैं समझता हूं कि घुमाए जाने से पहले तत्व को प्रदर्शित करने की आवश्यकता है। तो मैं यह काम कैसे कर सकता हूं?

यह रहा एक कार्यशील डेमो

एचटीएमएल:

<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']

      /* random select */
      this.direction = arr[Math.floor(Math.random() * arr.length)]

      /* hide line before toggling direction */
      setTimeout(() => {
            this.direction = null
      }, 1000)
    }
  }
})

सीएसएस:

.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);
  }
}
css
1
b3n10 15 सितंबर 2018, 01:58

1 उत्तर

सबसे बढ़िया उत्तर

और विचार विकर्ण रेखा बनाने के लिए छद्म तत्व का उपयोग करना है ताकि आप एनिमेटेड तत्व पर ट्रांसफॉर्म का उपयोग करने के बीच संघर्ष से बच सकें:

.line.diagonal {
  width:100px;
  height:100px;
  background:transparent;
}
.line.diagonal:before {
  content:"";
  top:0;
  left: calc(50% - 5px);
  position:absolute;
  transform: rotate(135deg);
  border-radius: inherit;
  background: blue;
  width: 10px;
  height: 100px;
}

पूरा कोड:

https://jsfiddle.net/m4g198r2/28/

1
Temani Afif 15 सितंबर 2018, 11:59