Css 在某些使用vue的broswers中未渲染动画_Css_Vue.js_Animation_Nuxt.js

Css 在某些使用vue的broswers中未渲染动画

css vue.js animation

Css 在某些使用vue的broswers中未渲染动画,css,vue.js,animation,nuxt.js,Css,Vue.js,Animation,Nuxt.js,所以我有我写的这个动画；它在某些浏览器上运行得很好，但在某些特定的ios chrome和safari上运行得不好，但在我的microsoft chrome edge浏览器上运行得不好这是对codepen中精确动画的复制，但我也在这里编写了代码 html css <body> <section> <div> <div> <div class="columns is-vcentered ha

所以我有我写的这个动画；它在某些浏览器上运行得很好，但在某些特定的ios chrome和safari上运行得不好，但在我的microsoft chrome edge浏览器上运行得不好

这是对codepen中精确动画的复制，但我也在这里编写了代码

html

css

<body>
  <section>

    <div>
      <div>
        <div class="columns is-vcentered has-text-centered">
          <div id="app">
            <div class="animated-images">
              <transition name="fade" mode="out-in" appear>
                <div v-if="showImage === 0" key="mac">
                  <img src="https://res.cloudinary.com/phumbie/image/upload/q_auto,f_auto/v1620073775/zilla/iMac_ccwhpt.svg" alt="" />
                </div>

                <!-- </transition> -->
                <!-- <transition name="fade"> -->
                <div v-if="showImage === 1" key="api">
                  <img src="https://res.cloudinary.com/phumbie/image/upload/q_auto,f_auto/v1620073650/zilla/api_qyj3vk.svg" alt="" />
                </div>

                <!-- </transition> -->
                <!-- <transition name="fade"> -->
                <div v-if="showImage === 2" key="pos">
                  <img src="https://res.cloudinary.com/phumbie/image/upload/q_auto,f_auto/v1620073829/zilla/pos_h6ry2w.svg" alt="" />
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>

</body>

new Vue({
  el: "#app",
  data: {
    showImage: 0
  },
  methods: {
    displayImage() {
      setInterval(() => {
        if (this.showImage === 2) {
          this.showImage = 0;
        } else {
          this.showImage++;
        }
        console.log(this.showImage);
      }, 5000);
    }
    // console.log(this.showImage);      },
  },
  mounted() {
    this.displayImage();
  }
});

/* .hero.is-dark.is-bold {
    background-image: -webkit-linear-gradient(309deg, #006694 0%, #124a63 65%, #052f42 100%);
    background-image: linear-gradient(141deg, #006694 0%, #124a63 65%, #052f42 100%);
} */

 .fade-enter-active,
  .fade-leave-active {
    transform: scale(1);
    transition: all 0.5s linear;
    opacity: 1;
    transform-origin: center;
  }
  .fade-enter,
  .fade-leave-to {
    transition: all 0.5s linear;
    opacity: 0;
    animation: scaleIn 0.5s;
    transform-origin: center;
    transform: scale(0);
  }
   .animated-images {
     position: absolute;
     top: 0;
     left:0
     height: calc(100vh - 6rem);
      width: 100%;
     display: grid;
      place-items: center;
       
     }

 img {
            max-height: 100%;
            max-width: 100%;
            animation: toggle 5s ease infinite;
            /* transform: scale(0, 0); */
          }

  @keyframes toggle {
      0%,
      100% {
        transform: translateY(0);
        /* transform: scale(1, 1); */
      }

      50% {
        transform: translateY(20px);
      }
    }
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }