06
Июл
2022

Как сделать так чтобы лифт и кнопка располагались независимо друг от друга?

Делаю SPA эмулятор лифта. По кнопке должен происходить вызов лифта, но уже на начальном этапе возникла проблема. Не могу сделать так, чтобы лифт с кнопкой были независимы. Если кнопка находится в template выше чем лифт, то смещение ее вниз с помощью margin-top смещает вниз и лифт, которому я уже задал место на странице. Если же лифт в tempalte выше кнопки, то кнопка начинает ездить вместе с лифтом. P.S. переместил компонент VueCabine в App.Vue, но ранее он был дочерним компонентом VueButton, надеялся на успех, но результатов это не принесло.

App.Vue:

 <template>
  <div id="app">
    <VueButton />
    <VueCabine />
  </div>
</template>

<script>
import VueButton from './components/VueButton.vue'
import VueCabine from './components/VueCabine.vue'
export default {
  name: 'app',
  data(){
    return{
     
    } 
  },
  components: {
    VueButton,
    VueCabine
  },
  methods: {
    
  }
}
</script>

<style>
@import '~materialize-css/dist/css/materialize.min.css';
@import 'assets/index.css';
</style>

VueButton.vue:

    <template>
            <div class="VueButton">
                <button class="buttons" id="1st">1</button>
                <!--<VueCabine cabine="cabine" />-->
            </div>
        </template>
        <script>
        //import VueCabine from './VueCabine.vue'
        export default {
            name: "VueButton",
            components: {
                //VueCabine,
            },
        }
        </script>
        <style scoped>
            .buttons {
                display: flex;
                background-color: white; 
                border-radius: 30px; 
                border-color: #FF8C00;
                margin-left: 300px;
            }
        
        </style>
    
VueCabine: 
    
<template>
        <div class="VueCabine">
        </div>
    </template>
    <script>
    export default {
        name: "VueCabine",
        components: {
          
        }
    }
    </script>
    <style scoped>
        .VueCabine {
      display: flex;
      animation-duration: 1s;
      animation-name: GoUp;
      animation-iteration-count: infinite;
      background-color: #20B2AA;
      width: 100px; 
      height: 100px; 
      margin-top: 550px;
      margin-left: 30px;
      
        }
    
    @keyframes GoUp{
      from {
        margin-top: 550px;
      }
    
      to {
        margin-top: 450px;
      }
        }
    
    </style>

Не обращайте внимания на анимацию и кнопку, сейчас главное сделать так чтобы кабина и кнопка двигались по странице независимо друг от друга

Источник: https://ru.stackoverflow.com/questions/1427341/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%82%D0%B0%D0%BA-%D1%87%D1%82%D0%BE%D0%B1%D1%8B-%D0%BB%D0%B8%D1%84%D1%82-%D0%B8-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0-%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%B0%D0%B3%D0%B0%D0%BB%D0%B8%D1%81%D1%8C-%D0%BD%D0%B5%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE-%D0%B4%D1%80%D1%83%D0%B3-%D0%BE%D1%82-%D0%B4%D1%80%D1%83%D0%B3%D0%B0

Тебе может это понравится...

Добавить комментарий