Question

我希望内容div从模糊到尖锐，但我只能弄清楚如何做相反的事情。

div {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;


    -webkit-transition-delay: 1s;
    transition-delay: 1s;

}

Answer 1

运行此示例，通过在目标

上添加/删除CSS类来在模糊和锐利之间切换

var $ = jQuery;

var btn = $('button').click(function() {
  $('.target').toggleClass('blurry');
});

.target {
  transition: all 2s linear;
  transition-delay: 1s;
}

.blurry {
  filter: blur(5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button> Toggle blur/sharp </button>

<div class="target blurry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum pellentesque leo et porttitor. Ut luctus augue vel venenatis tincidunt. Nullam aliquam tempus cursus. Morbi quis aliquam sem. Fusce et ornare neque, a ultrices ipsum. Integer lorem sem, rhoncus non tempor non, mattis quis diam. Nunc ullamcorper tempor dolor sit amet feugiat. Etiam pretium lectus ut nisi ornare, quis euismod lacus feugiat. Donec scelerisque luctus sem at vulputate.
</div>

<div class="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum pellentesque leo et porttitor. Ut luctus augue vel venenatis tincidunt. Nullam aliquam tempus cursus. Morbi quis aliquam sem. Fusce et ornare neque, a ultrices ipsum. Integer lorem sem, rhoncus non tempor non, mattis quis diam. Nunc ullamcorper tempor dolor sit amet feugiat. Etiam pretium lectus ut nisi ornare, quis euismod lacus feugiat. Donec scelerisque luctus sem at vulputate.
</div>

如何扭转此Webkit过渡的影响？

1 个答案: