原生JS实现Vue transition fade过渡动画效果示例
作者:TANKING
这篇文章主要为大家介绍了原生JS实现Vue transition fade过渡动画效果示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
Vue过渡动画
Vue有一个过渡动画,很多网页都在用,主要是体验还不错,所以很多使用Vue构建的页面如果考虑使用动画,基本就会使用这个fade动画,我现在使用原生的JavaScript来实现。
代码
<style> .page { opacity: 0; transition: opacity 0.5s, transform 0.5s; transform: translateY(100%); } .page.visible { opacity: 1; transform: translateY(0); } .fade { opacity: 0; transform: translateY(10%); transition: opacity 0.5s, transform 0.5s; } @keyframes fadeAnimation { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } .fade.show { opacity: 1; transform: translateY(0); } #page-content{ width: 800px; } #app{ width: 800px; height: 600px; margin: 100px auto; padding: 20px 20px; background: #eee; } #app .nav{ width: 200px; height: 600px; float: left; } #app .nav button{ width: 200px; height: 40px; margin: 0 auto 10px; background: #39f; color: #fff; font-size: 15px; outline: none; cursor: pointer; border: none; border-radius: 5px; } #page-content{ width: 550px; height: 600px; float: right } </style> <script type="text/javascript"> var pageData = [ {'Page1': '请注意,上述示例中的动画效果是通过CSS的动画来实现的,而不是使用原生JavaScript逐帧处理动画。这种方式可以更方便地使用CSS来定义和管理动画效果,但具体的实现方式会根据你的需求和设计来定制。你可以根据需要进行调整和扩展,以满足你的具体需求。'}, {'Page2': '在上面的示例中,我们添加了一个名为fade的CSS类,用于应用淡入淡出的动画效果。使用animation属性指定了名为fadeAnimation的动画,并设置了持续时间为0.5秒。@keyframes规则定义了fadeAnimation动画的关键帧。在0%时,页面内容元素的透明度为0,向下移动50%;在100%时,透明度为1,不再进行垂直位移。这样就实现了从下往上的淡入效果。'}, {'Page3': 'avaScript部分的changePage函数接收一个页面索引作为参数,根据索引从pageData数组中获取相应的页面数据。然后,我们通过操作page-content元素的textContent属性,将页面内容更新为对应页面的值。'} ]; window.onload=function(){ // 进入页面加载 changePage(0); } function changePage(pageIndex) { var pageContent = document.getElementById('page-content'); var page = pageData[pageIndex]; var key = Object.keys(page)[0]; var value = page[key]; pageContent.classList.remove('show'); setTimeout(function() { pageContent.textContent = value; pageContent.classList.add('show'); }, 300); } </script> <div id="app"> <div class="nav"> <button onclick="changePage(0)">Page 1</button> <button onclick="changePage(1)">Page 2</button> <button onclick="changePage(2)">Page 3</button> </div> <div id="page-content" class="fade"></div> </div>
效果
动态图:
以上就是原生JS实现Vue transition fade过渡动画效果示例的详细内容,更多关于Vue transition fade过渡动画的资料请关注脚本之家其它相关文章!