添加过渡尝试将背景图像上传到本地存储

Question

I would like to know how can I add transition (fade effect) after uploading an image to localstorage? 我想知道在将图像上传到本地存储后如何添加过渡（淡入淡出效果）？

 $(switchBackground); var oFReader = new FileReader(), rFilter = /^(?:image\\/bmp|image\\/cis\\-cod|image\\/gif|image\\/ief|image\\/jpeg|image\\/jpeg|image\\/jpeg|image\\/pipeg|image\\/png|image\\/svg\\+xml|image\\/tiff|image\\/x\\-cmu\\-raster|image\\/x\\-cmx|image\\/x\\-icon|image\\/x\\-portable\\-anymap|image\\/x\\-portable\\-bitmap|image\\/x\\-portable\\-graymap|image\\/x\\-portable\\-pixmap|image\\/x\\-rgb|image\\/x\\-xbitmap|image\\/x\\-xpixmap|image\\/x\\-xwindowdump)$/i; oFReader.onload = function(oFREvent) { localStorage.setItem('b', oFREvent.target.result); switchBackground(); }; function switchBackground() { var backgroundImage = localStorage.getItem('b'); if (backgroundImage) { $('body').css('background-image', 'url(' + backgroundImage + ')'); } } function loadImageFile(testEl) { if (!testEl.files.length) { return; } var oFile = testEl.files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); }

 <input id="test" type="file" onchange="loadImageFile(this)" />

Answer 1

CSS background-image property of a DOM element does not have a built-in means to animate. DOM元素的CSS background-image属性没有内置的动画方法。

CSS pseudo element can be animated. CSS伪元素可以设置动画。 You can use :after CSS pseudo element with width set to the calc(100vw) and height set to calc(100vh) to cover the viewport, and animation property set where corresponding keyframes animate the pseudo element content property value from opacity 0 to opacity 1 . 您可以使用:after CSS伪元素，其width设置为calc(100vw)且height设置为calc(100vh)以覆盖视口，并设置animation属性，在其中设置相应的keyframes使伪元素content属性值从不opacity 0变为opacity 1 animation属性。 If backgroundImage is not null , append CSS text to <style> element which sets content property of body :after pseudo element with content set to CSS url() function to the data URL retrieved from localStorage . 如果backgroundImage不为null ，则将CSS文本附加到<style>元素，该元素将body content属性设置为:after content设置为CSS url()函数的伪元素:after元素将从localStorage检索到的data URL 。

<!DOCTYPE html>
<html>
<head>
  <style>
    body:after {
      position: relative; /* set `position` to `relative`
      content: unset; /* set `content` to `unset`  */
      width: calc(100vw); /*  width of viewport */
      height: calc(100vh); /* height of viewport */ 
      animation: bg 5s ease forwards; /* `iteration-timing-function` set to `forwards` */
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(switchBackground);

    var oFReader = new FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
      localStorage.setItem('b', oFREvent.target.result);
      switchBackground();
    };

    function switchBackground() {
      var backgroundImage = localStorage.getItem('b');
      if (backgroundImage) {
        // set `body:after` `content` to `data URL`: `backgroundImage`
        $("style").append(`body:after{content:url(${backgroundImage})} @keyframes bg {from {opacity:0}to {opacity:1)}}`);
      }
    }

    function loadImageFile(testEl) {
      if (!testEl.files.length) {
        return;
      }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) {
        alert("You must select a valid image file!");
        return;
      }
      oFReader.readAsDataURL(oFile);
    }
  </script>
</head>
<body>
  <input id="test" type="file" onchange="loadImageFile(this)" />
</body>
</html>

plnkr http://plnkr.co/edit/b29hbGi6meodd2LTEgFL?p=preview plnkr http://plnkr.co/edit/b29hbGi6meodd2LTEgFL?p=preview

添加过渡尝试将背景图像上传到本地存储

问题描述

1 个解决方案

解决方案1
0 2019-02-23 08:09:24

添加过渡尝试将背景图像上传到本地存储

问题描述

1 个解决方案

解决方案1 0 2019-02-23 08:09:24

解决方案1
0 2019-02-23 08:09:24