Question

我正在尝试使用动态名称在vuejs中的淡入淡出和滑动之间进行动画处理，但似乎不起作用。粘贴到动画选项下面的代码在切换选择标签的值时不会更改。

<button class="btn btn-primary" @click="show = !show">Show Alert</button>                
          <select v-model="alertAnimation" class="form-control my-4">
            <option value="slide">slide</option>
            <option value="fade">fade</option>
          </select>

这是脚本

    data() {
            return {
              show: false,
              alertAnimation:'fade',
            }
        }

这是样式

    .fade-enter{
    opacity: 0;
  }
  .fade-enter-active{
    transition: opacity 0.5s;
  }
  .fade-leave{

  }
  .fade-leave-active{
    transition: opacity 0.5s;
    opacity: 0;
  }

  .slide-enter{
  }
  .slide-enter-active{
    animation: slide-in 1s ease-out forwards;

  }
  .slide-leave{

  }
  .slide-leave-active{
    animation: slide-out 1s ease-out forwards;
  }
  @keyframes slide-in {
    from{
      transform: translateY(20px);
      opacity: 0;
    }
    to{
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-out {
    from{
      transform: translateY(0);

    }
    to{
      transform: translateY(20px);
      opacity: 0;
    }
  }

Answer 1

这是您要实现的目标吗？ codepen

具有幻灯片和淡入淡出过渡的示例

<div id="app">
   <button class="btn btn-primary" @click="show = !show">Show Alert</button>                
   <select v-model="alertAnimation" class="form-control my-4">
      <option value="slide">slide</option>
      <option value="fade">fade</option>
   </select>
   <div>
      <div id="app">
         <transition :name="alertAnimation" mode="out-in">
            <h1 v-if="show" key="1">Panel 1</h1>
            <h1 v-if="!show"key="2">Panel 2</h1>
         </transition>
         <transition :name="alertAnimation" mode="out-in">
            <div v-if="show" key="1">
               panel 1
               <a href="#" @click.prevent="show = false">
               Go to the panel 2
               </a>
            </div>
            <div v-if="!show" key="2">
               panel 2
               <a href="#" @click.prevent="show = true">
               &lt; Go back to panel 1
               </a>
            </div>
         </transition>
      </div>
   </div>
</div>

动态名称在vuejs中不起作用

1 个答案: