Question

我有一个像图片一样的棕色树枝的div，我需要隐藏它，当点击一个按钮时，从底部到顶部取消隐藏，好像它有一个面具。我不能用自下而上的幻灯片（例如在jquery中）显示它，因为顶部有叶子和东西，所以我最好的想法就是取消隐藏某种面具。

现在我有这个：

$('.button').click(function () {
        $('#branchmain').show('slide', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

我怎样才能将一个面具应用到div并从底部到顶部取消隐藏？我不希望它从下到上移动，但要揭示它。有没有办法做到这一点？

Answer 1

如果你使用'盲'效果而不是'幻灯片'，它可以正常工作。

如果您需要在其他图像前面显示树，请使用分层div。

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

{{1}}

Answer 2

我已经创建了一个SVG剪贴蒙版和CSS动画的组合来动画淡化方法。请注意我已经无限制地运行了CSS并且仅仅为了演示调整了一些设置，我肯定你会想要稍微改变一些事情。但作为一个概念证明，它在我看来完美无缺：

HTML：

<body>
  <img class="clipped" src="http://i.imgur.com/IV2C28A.png" />  
  <svg width="100px" height="400px">
    <defs>
      <clipPath id="clipping">
        <rect width="100" height="300"/>
      </clipPath>
    </defs>
  </svg>
</body>

JS：

  img {
    position: absolute;
    top: inherit;
    left: 0;
  }
  img.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  }

  div {
    position: absolute;
    left: 410px;
    width: 400px;
    height: 200px;
  }
  div.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  /*  opacity: 0;*/
  }
  svg rect {
    animation: move-mask infinite running 4s;
  }
  @keyframes move-mask {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(600px)}
  }

Demo / Codepen：

http://codepen.io/mrwigster/pen/eJNBBK

Answer 3

您可以将一个div（带有background-image）放在另一个的顶部，并逐步减少最高max-height的{{1}}：

div

function witherTree() {
var treeWithLeaves = document.getElementsByClassName('tree-with-leaves')[0];
var treeWithoutLeaves = document.getElementsByClassName('tree-without-leaves')[0];
var treeWithLeavesHeight = treeWithoutLeaves.clientHeight;
treeWithLeaves.style.maxHeight = treeWithLeavesHeight + 'px';

var i = 0;

setInterval(function(){
treeWithLeaves.style.maxHeight = (treeWithLeavesHeight - i) + 'px';
i++;
},20);
}

document.getElementsByTagName('button')[0].addEventListener('click',witherTree,false);

body {
margin: 25px 0 0 50px;
}

.tree-with-leaves, .tree-without-leaves {
width: 125px;
height: 236px;
}

.tree-with-leaves {
background-image: url('http://i.stack.imgur.com/a140q.png');
}

.tree-without-leaves  {
background-image: url('http://i.imgur.com/IV2C28A.png');
background-color: rgb(255,255,255);
overflow: hidden;
}

button {
display: block;
margin: 25px;
}

从底部到顶部取消隐藏div

3 个答案: