vue動畫之點擊按鈕往上漸漸顯示出來的示例分析

發(fā)布時間：2021-06-26 14:02:36 來源：億速云閱讀：170 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“vue動畫之點擊按鈕往上漸漸顯示出來的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue動畫之點擊按鈕往上漸漸顯示出來的示例分析”這篇文章吧。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>動畫</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 
 <style>
  .box{
   height:500px;
   background-color:black; 
    overflow: hidden;        }

//給過渡的name加樣式

  .mybox-leave-active,.mybox-enter-active{
   transition: all 1s ease; 
  }
  .mybox-leave-active,.mybox-enter{
   height:0px !important;
  }
  .mybox-leave,.mybox-enter-active{
   height: 500px;
  }
 </style>
</head><body>

<!-- 首先將要過渡的元素用transition包裹，并設(shè)置過渡的name） -->

 <div id="box">
 <transition name="mybox">
  <div class="box" v-show="boxshow"></div>
 </transition>
 <button @click="togglebox">按鈕</button>
</div>
 
 <script>
  new Vue({
  el:'#box',
  data:{
   boxshow:false
  },
  methods:{
   
   togglebox:function(){
    this.boxshow = !this.boxshow;
   }
  }  
 });
  
  
 </script>
</body>
</html>

以上是“vue動畫之點擊按鈕往上漸漸顯示出來的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue動畫之點擊按鈕往上漸漸顯示出來的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽