vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue transition fade过渡动画

原生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过渡动画的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文